小编Oct*_*ian的帖子

我正在尝试使用 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"; …

我正在尝试使用后端对 REST API 的 API 调用产生的数据更新 React 应用程序的上下文。问题是我无法同步该功能。

我已经尝试过这篇博客文章https://medium.com/@__davidflanagan/react-hooks-context-state-and-effects-aa899d8c8014 中建议的这个解决方案，但它不适用于我的情况。

这是 textContext.js 的代码

import React, {useEffect, useState} from "react";
import axios from "axios";

var text = "Test";

fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
      text = json;
    })




const TextContext = React.createContext(text);
export const TextProvider = TextContext.Provider;
export const TextConsumer = TextContext.Consumer;

export default TextContext

这是我尝试从上下文访问数据的功能组件

import TextProvider, {callTextApi} from "../../../../services/textService/textContext";
function  Profile()
{

  const text = useContext(TextProvider);
  console.log(text);
  const useStyles = makeStyles(theme => ({
    margin: {
      margin: …