如何使用 fetch 订购 useEffect 挂钩答案

【问题标题】：How to order useEffect hooks with fetch如何使用 fetch 订购 useEffect 挂钩
【发布时间】：2021-10-07 14:18:18
【问题描述】：

我的应用中有 2 个 useEffect，如下所示：

 const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    fetchData(fetchStr)
      .then((data) => { setItems(data) })
      .then(() => { setLoading(false) });
  }, [dependencyA]);

  useEffect(()=> if (!loading){
   setItems(...)
   setAnotherState(...) 
 ,[dependencyA, dependencyB])}

这两部分要复杂得多，对我来说，它们不能合并为一个 useEffect 我在两个useEffect 中都有一些console.log，所以我知道第二个useEffect 日志比第一个早。我能做些什么来确保第二个只会在第一个完成获取内容后被调用。两者都有相同的dependencyA，但后者有额外的dependencyB。

【问题讨论】：

这些是在做异步的事情吗？
如果代码是依赖的，也许你应该将它们组合成一个 useEffect
你想达到什么目的？如果没有用例，不幸的是，这个问题并不清楚。
第一个用于从服务器获取数据，第二个用于突变与第一次获取的数据相关的状态。

标签： reactjs

【解决方案1】：

您可以在第一个效果完成后添加一个状态并将其设置为真，然后在第二个效果中添加该状态，如果该状态为真，则只运行该效果。

const [isDone, setIsDone] = useState(false);
useEffect(() => {
// Do something 
setIsDone(true)
},[dependencyA]) 
useEffect(() => {
if(!isDone) return;
// Do something 
setIsDone(true)
},[dependencyA, dependencyB, isDone])

【讨论】：

好主意，我认为可行
虽然不行，第二个useEffect还是先执行
@chaukhoa97 你能分享你的代码吗？
我已经更新了问题