如何调整含fetch的useEffect执行顺序，确保第二个在第一个请求完成后执行

问题原因 #

两个useEffect本身的触发顺序是按代码定义顺序先触发第一个，但第一个内部的fetch是异步操作，setLoading(false)会等到请求返回后才执行，第二个useEffect在dependencyA/dependencyB变动时会同步触发执行，所以会出现日志输出更早的情况。

实现方案 #

你可以通过新增请求完成标记、优化判断条件实现顺序执行，不需要合并两个useEffect：

• 新增lastCompletedDepA状态，用来标记最近一次请求完成时对应的dependencyA值，避免旧请求完成后误触发第二个逻辑
• 给第二个useEffect补充判断条件，确保只有「当前dependencyA和最近请求完成的dependencyA一致」且「loading为false」时才执行内部逻辑
• 同时给第一个useEffect添加竞态处理，避免dependencyA快速变化时多个请求返回顺序混乱导致状态异常

修改后的代码示例：

const [loading, setLoading] = useState(false);
// 新增状态：记录最近一次请求完成时的dependencyA值
const [lastCompletedDepA, setLastCompletedDepA] = useState(null);

useEffect(() => {
  const controller = new AbortController();
  setLoading(true);
  fetchData(fetchStr, { signal: controller.signal })
    .then((data) => { 
      setItems(data);
      // 请求完成时更新标记
      setLastCompletedDepA(dependencyA);
    })
    .then(() => { setLoading(false) })
    .catch(err => {
      if (err.name !== 'AbortError') {
        setLoading(false);
        // 你的错误处理逻辑
      }
    });

  return () => controller.abort();
}, [dependencyA]);

useEffect(() => {
  // 补充判断：只有当前dependencyA和已完成请求的dependencyA匹配、且loading结束时才执行
  if (!loading && dependencyA === lastCompletedDepA) {
    setItems(...)
    setAnotherState(...) 
  }
}, [dependencyA, dependencyB, loading, lastCompletedDepA])

注意事项 #

• 如果dependencyA是引用类型，建议改成用useRef存当前值进行比对，或者用深比较逻辑，避免判断失效
• 如果你不需要处理dependencyA变化后的重复触发场景，也可以简化为用一个isFirstFetchCompleted的布尔状态替代lastCompletedDepA即可

内容的提问来源于stack exchange，提问作者chaukhoa97