反应，等待一个钩子完成，然后再开始另一个钩子

【问题标题】：React, wait for a hook to finish before starting another hook反应，等待一个钩子完成，然后再开始另一个钩子
【发布时间】：2022-10-04 19:02:22
【问题描述】：

我有一个如下组件

export const Component = () => {
  const { data: item} = useItem();
  const { list } = useItemList(item?.id.toString());


  return(
    item ? (<p>some stuff</p>) : (<p>loading</p>)
  )
}

问题是应用程序没有等待项目可用，它在未定义时运行 useItemList，但我必须等待获取项目

我该如何解决呢？

【问题讨论】：

你可以在做const { list } = useItemList(item?.id.toString()); 之前检查项目的价值
const { list } = item && useItemList(item?.id.toString()); 返回警告

标签： reactjs

【解决方案1】：

你不能有条件地运行钩子，因为React relies on the order in which Hooks are called

如果跳过钩子，React 将无法正确跟踪状态

~~一个简单的解决方案是修改您的useItemList 代码，如果参数是undefined，则不要调用其中的任何内容。~~

更新：我的解决方案不正确，因为钩子值是初始值，所以它不会工作。

这是正确的解决方案：

你应该返回一个记忆回调从useItemList 改为使用item 在useEffect 中运行此回调，并将该回调（可选）作为依赖项

【讨论】：