how to use useEffect and useContext with fetching data?

Question

I'm trying to use React's Context API as well as Hooks with fetching data.

I'm coding [createContext] like below, but it doesn't work.

import { createContext, useEffect } from "react";

export const ColorContext = createContext({});

export const ProductsProvider = props => {
  useEffect(() => {
    (async() => {
      const res = await fetch('http://localhost:3000/api/categories')
      const posts = await res.json()
      return { props: { datas: posts } }
    })
  })
  return(
    <ColorContext.Provider value={props.datas}></ColorContext.Provider>
  )
}

And here're I'm trying to use [useContext]. This's a default header as a component.

import { ColorContext } from '../../src/colorContext';
import { useContext } from "react";

export default function HeaderDafault(props) {
  const colors = useContext(ColorContext);
  console.log(colors);
  
  return (
    <header className={`h-10 px-5 flex items-center relative`}>
    </header>
  );

}

There's no errors, but there's nothing in console log. I think the way i'm using [createContext] is wrong, but i can't find my mistakes.

@Yuzu you won't see anything in the console log, because you are not logging anything. Or rather, you are not assigning anything. The fat the function returns a props object does not mean it automatically gets assigned to your props. You need to create a state via `useState` and assign it in the `useEffect` via the `Dispatch` handler. (i.e. `const [data, setData] = useState({})` and then just call `setData` inside the `useEffect` — Samuel Hulla, Apr 07 '22 at 09:30

Amit · Answer 1 · 2022-04-07T09:25:24.807

1

The problem is that you are not storing the data somewhere after fetching it in the useEffect hook.

useContext is used along with useState to store and provide the data to other components.

Do this instead:

import { createContext, useEffect, useState } from "react";

export const ColorContext = createContext({});

export const ProductsProvider = (props) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function fetchAPI() {
      const res = await fetch("http://localhost:3000/api/categories");
      const posts = await res.json();
      setData(posts);
    }
    fetchAPI();
  }, []);
  return <ColorContext.Provider value={data}></ColorContext.Provider>;
};

edited Apr 07 '22 at 09:25

answered Apr 07 '22 at 09:04

Amit

1,018
1
8
23

Thank you for your advice. I edited my code the way you said, but it doesn't work. there's still no errors, but the data doesn't show up in console log. – Yuzu Apr 07 '22 at 09:10
I've updated the answer. My bad, we were using an arrow function to fetch the data from the api. But that arrow function was never called. – Amit Apr 07 '22 at 09:27
Thank you. I collected my code, but there's still nothing in console.log. and a debug tool doesn't stop. – Yuzu Apr 07 '22 at 09:37
Then there must be some problem with the network request or data returned from the API. Inspect the network activity from Network Panel of your browser. – Amit Apr 07 '22 at 09:48

how to use useEffect and useContext with fetching data?

1 Answers1