Question

我已经为此苦苦挣扎了一段时间，但仍然无法解决这个问题。我想要实现的是：

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

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

Answer 1

好的，在尝试用这个钩子至少完成任何事情时，我发现当没有数组迭代方法时它工作正常，比如对上下文值执行 map、filter 或 reduce，m 因为它不执行更新值的代码，而是在值为空时中断它。是否有人成功地检索数据并在组件中对其进行过滤？谢谢！

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

1 个答案: