时间戳

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

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

问题描述

我已经为此苦苦挣扎了一段时间，但仍然无法弄清楚。我想要实现的是：

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

一切正常，除了更新部分：钩子内的值被更新，但其他组件中的上下文值在状态用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)
}

标签： javascriptreactjsreact-hooksreact-context

解决方案

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

推荐阅读