IT技术 - 从异步 API 调用中设置 React Context 中的数据 - 吾爱随笔录

我正在尝试使用 GET API 请求使用来自后端的数据初始化自定义 React 上下文。但是，在 API 调用完成数据获取之前加载上下文。

我尝试过的是使用消费者将数据发送到子组件，但我只能访问上下文的默认值，该值是在创建上下文后设置的。

这是我尝试设置上下文数据的方式

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>)
  }

}

这是我尝试在子组件中访问它的方式

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;

但是，页面中唯一显示的是“Raaaaaaa”，即组件的默认值。如何让子组件等待数据完成从 API 请求中获取？