如何确保异步useEffect中setState按请求发送顺序执行

你的问题属于典型的请求竞态：当依赖参数快速变更时，旧请求的响应晚于新请求返回，导致状态被旧数据覆盖。下面是几种实用的解决办法：

方法1：使用AbortController取消旧请求 #

利用浏览器原生的AbortController，在依赖变更时直接取消上一次未完成的请求，从根源避免旧响应干扰状态。

修改后的代码：

const Component = ({dep1, dep2}) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const getData = async () => {
      try {
        const data = await api.getData({dep1, dep2}, { signal });
        setData(data);
      } catch (error) {
        // 忽略因取消请求抛出的错误
        if (error.name !== 'AbortError') {
          console.error('请求失败:', error);
        }
      }
    };

    getData();

    // 组件重新渲染时，取消上一次请求
    return () => controller.abort();
  }, [dep1, dep2])

  return <div>{JSON.stringify(data)}</div>
}

注：需要确保你的api.getData方法支持接收signal参数，并传递给底层的fetch或axios请求（axios v0.22.0+也支持AbortController）。

方法2：用标志位过滤无效的状态更新 #

在useEffect内部设置一个标志位，标记当前请求是否有效，请求完成后只在有效时更新状态。

修改后的代码：

const Component = ({dep1, dep2}) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isCurrent = true;

    const getData = async () => {
      const responseData = await api.getData({dep1, dep2});
      // 仅当当前请求是最新的，才更新状态
      if (isCurrent) {
        setData(responseData);
      }
    };

    getData();

    // 依赖变更时，标记上一次请求失效
    return () => {
      isCurrent = false;
    };
  }, [dep1, dep2])

  return <div>{JSON.stringify(data)}</div>
}

这种方法不需要修改API请求封装，实现简单，适合大部分场景。

方法3：对比请求参数与当前参数 #

在请求完成后，对比当前的dep1、dep2和发起请求时的参数是否一致，一致才更新状态。

修改后的代码：

const Component = ({dep1, dep2}) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const currentDep1 = dep1;
    const currentDep2 = dep2;

    const getData = async () => {
      const responseData = await api.getData({currentDep1, currentDep2});
      // 对比当前参数与请求时的参数，一致才更新
      if (dep1 === currentDep1 && dep2 === currentDep2) {
        setData(responseData);
      }
    };

    getData();
  }, [dep1, dep2])

  return <div>{JSON.stringify(data)}</div>
}

这种方法逻辑直观，但如果参数是引用类型（比如对象、数组），需要用深对比或者额外的唯一标识来判断一致性。

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