23

I am trying to initialize a custom React context with data from back end, using a GET API request. However, the context is loaded before the API call finishe the data fetching.

What I've tried is to use a consumer to send data to the child component but I can only access the default value of the context which is set then the context is created.

Here is how I am trying to set my context data

import React, {useState,useEffect} from "react";
import {callAffiliateApi} from "./services/affiliateService/transactionContext";

export const AffiliateContext = React.createContext("Raaaaaaaaaaaa");

export const AffiliateProvider  = ({children}) => {

  const [data, setData] = useState(null);
  useEffect(()=> {
    async function fetchData() {
      const newText = await callAffiliateApi();
      setData(newText)
    };fetchData()
  },[])

  console.log("Data in the context", data);
  if(data != null){
    return (
      <AffiliateContext.Provider value={data}>
        {children}
      </AffiliateContext.Provider>
    )}
  else {
    return (
      <AffiliateContext.Provider value={"Loading..."}>
        {children}
      </AffiliateContext.Provider>)
  }

}


And here is how I'm trying to access it in the child component

import {AffiliateContext} from "../../../../AffiliateContext";

class Profile extends Component {


  constructor(props) {
    super(props);
    this.state = {
      text: this.props.text,
      user: this.props.user,

    }

  }

  render() {
    return (
    <AffiliateContext.Consumer>
      {data =>
        <div>
        {data}
      </div>}
    </AffiliateContext.Consumer>
      )
  }
}
export default Profile;

However, the only thing that gets displayed in the page is "Raaaaaaa", the default value of the component. How can I make the child component wait until the data finishes fetching from the API request?

6
  • Did you used AffiliateProvider in your index.js or app.js? Oct 2, 2019 at 8:42
  • None of them. I just want to access the context in this class.
    – Octavian
    Oct 2, 2019 at 8:44
  • You need to do this. Oct 2, 2019 at 8:46
  • You are exporting your AffiliateProvider component, so you need to use it in somewhere before you access in any child components. For example you need to wrap jsx in your App.js with AffiliateProvider. Something like ` render() { return ( <AffiliateProvider> <div> Content of your jsx </div> </AffiliateProvider> ); } ` Oct 2, 2019 at 8:58
  • Can't I just add access it in the render of my Child component?
    – Octavian
    Oct 2, 2019 at 9:06

1 Answer 1

30

try to use useContext its cleaner and try not to use the async inside the useEffect!

their related issues

import React, { useState,useEffect,useContext } from "react";
import { callAffiliateApi } from "./services/affiliateService/transactionContext";

const Context = React.createContext({});
const AffiliateContext = init => useContext(Context);

export const AffiliateProvider  = ({children}) => {

  const [data, setData] = useState(null);
  const [loading,setLoading]=useState(false);

  const getAffiliates = async ()=>{
    setLoading(true)
    const newText = await callAffiliateApi();
    setData(newText)
    setLoading(false)
  }

  useEffect(()=> {
    getAffiliates()
  },[])


    return (
      <AffiliateContext.Provider value={{loading,list:data}}>
        {children}
      </AffiliateContext.Provider>
    )
}
5
  • 4
    There is no such thing as useReactContext.... did you mean useContext? Nov 1, 2019 at 10:58
  • 3
    I believe it was a simple mis-spell of React.useContext()
    – Jeff Klink
    Jun 1, 2020 at 18:53
  • 1
    The async function originally created in useEffect was perfectly ok. Using it outside like this requires it be wrapped in useCallback. Dec 2, 2021 at 5:19
  • 5
    I am curious about the init => useContext(Context); part someone knows why is it necessary? Normally it would be written like this: const AffiliateContext = React.createContext({});
    – Ander
    Jan 12, 2022 at 7:29
  • please define getAffiliates fn inside the useEffect callback or wrap it in a useCallback hook otherwise this may introduce bugs. May 22, 2022 at 6:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.