Question

在包含 API 调用的异步函数返回一个对象数组之后，我正在使用 useEffect 钩子来实现一些逻辑，这是该钩子的依赖项。

问题是钩子本身不会等待数组改变来执行其中的逻辑，它只是执行即使 availableSites 仍然是 {{1 }}：

[]

Answer 1

useEffect 总是至少执行一次，不管它有什么依赖关系。如果您只希望它在设置数据时执行，请使用以下内容：

useEffect(() => {
  if(availableSites.length > 0) {
    doSomething...
  }
}, [availableSites]);

如果来自后端的 availableSites 可能为空，则将 availableSites 的初始状态设置为 null 并在 useEffect 中检查它是否不是 null

Answer 2

如果我们在组件中有多个 useEffect 实例，所有 useEffect 函数将按照它们在组件内定义的顺序执行，您将获得预期的行为。尝试检查数组长度是否发生变化，因为第二个 useEffect 取决于 [availableSites]，因此如果 [availableSites] 的值发生变化，它将再次运行。

useEffect 钩子不等待异步依赖

2 个答案: