如何将 fetch() 函数的结果传递给 React 上下文值，而不是我为钩子设置的默认值？

Posted 2023-04-14

【中文标题】如何将 fetch() 函数的结果传递给 React 上下文值，而不是我为钩子设置的默认值？

【英文标题】：How do I pass the result of fetch() function to the React context value, not the default value that I set for the hook?

【发布时间】：2021-09-05 11:32:43

【问题描述】：

我一直在努力解决这个问题，但仍然无法弄清楚这一点。 我想要实现的是：

从端点获取项目 使用新值更新状态 将此数据作为上下文传递，以便我可以在网站上全局使用它。

一切正常，除了更新部分：钩子内的值已更新，但在使用fetch()数据更新状态之前，正在获取其他组件中的上下文值，因此它返回默认状态值（空数组，或者我放在那里的任何东西）。

我希望数据到达更新后，或在此过程中稍后更新，但我不知道为什么 onComponentUpdated() 挂钩或类似的东西。

任何帮助将不胜感激！

我的代码：

上下文提供程序组件，我在其中获取数据：

function ContextProvider( children ) 
let [data, setData] = useState([]);
   useEffect(() => 
  fetch("https://mysurl.com")
  .then((newData) => newData.json())
  .then((images) => 
    setData(images.items);
  );
  , []);
const setNewTheme = () => 
setTheme(
  currTheme.name == "light" ? context.themes.dark : context.themes.light
  );
 ;

return (
  <GlobalContext.Provider
    value= theme: currTheme, updateTheme: setNewTheme, allProducts: data 
  >
  children
  </GlobalContext.Provider>
 );
 

我要使用数据的上下文消费者组件：

function GridGallery( gridTitle, sectionTitle, category ) 
  const context = useContext(GlobalContext);
  let data = context.allProducts;
  console.log(data)

【问题讨论】：

您必须在 GridGallery 中引入状态并在效果中更新该状态。见***.com/questions/60697733/react-context-not-updating

对不起，但我不确定它将如何帮助我。我的上下文提供程序函数中已经有了状态，我将数据和 setData 状态参数传递给上下文接收器。但它仍然没有帮助，状态没有得到更新

它也适用于除登陆页面之外的所有其他组件，出于某种原因....

这是问题所在。当使用获取的数据更新上下文时，通过钩子“使用”该上下文的组件不会重新渲染。您可以查看有关组件生命周期的文档以了解组件何时重新渲染。

【参考方案1】：

感谢您提供有关使用状态的说明。我找到了解决方案，这与 Sate 无关，而是我正在创建一个上下文并在同一个组件中获取数据这一事实。创建一个中间 AppWrapper 组件并在那里获取数据就像一个魅力。谢谢！