React Hooks中多fetch请求状态不更新问题排查

我来帮你拆解这个问题——你遇到的状态更新失效（看起来像请求重复，实则是状态更新互相覆盖）的核心原因，是React Hooks的闭包特性加上状态更新方式不对导致的，和class组件的componentDidMount有本质区别：

为什么在Hooks里会失效？ #

1. 闭包捕获的state快照问题 #

你的useEffect依赖是[]，意味着它只会在组件挂载时执行一次。此时回调函数里的state是组件初始渲染时的快照（也就是{ isLoaded: false, isLoaded2: false, ... }这个初始值）。

当两个fetch请求先后完成并调用setState时，它们都是基于这个初始的state去扩展新状态的。比如：

• 如果第二个请求先完成，会把isLoaded2设为true，但第一个请求完成后，会用初始的isLoaded2: false覆盖掉这个修改，最终状态里isLoaded2又变回了false
• 反之亦然，后执行的setState总会覆盖前一个的修改，导致你看起来状态没更新

2. 和class组件componentDidMount的区别 #

在class组件里，this.setState({...this.state, ...})中的this.state是实时更新的引用——每次调用setState后，this.state都会指向最新的状态。但Hooks里的state是每次渲染的快照，闭包会固定住这个值，所以在useEffect的回调里，state永远是初始的那个值。

解决方案 #

方案一：使用函数式更新setState #

这是最直接的解决方式，给setState传递一个函数，这个函数会接收当前最新的状态作为参数，返回新的状态。这样每次更新都是基于上一次的最新状态，不会被闭包里的旧快照干扰：

const [state, setState] = useState({ isLoaded: false, isLoaded2: false, response1: null, response2: null, error: null });
useEffect(() => {
  fetch("some api", { method: "GET" })
    .then(res => res.json())
    .then(
      res => {
        // 用prevState获取最新状态
        setState(prevState => ({ ...prevState, isLoaded: true, response1: res }));
      },
      error => {
        setState(prevState => ({ ...prevState, isLoaded: false, error: error }));
      }
    );
  fetch("another api", { method: "GET" })
    .then(res => res.json())
    .then(
      res => {
        setState(prevState => ({ ...prevState, response2: res, isLoaded2: true }));
      },
      error => {
        setState(prevState => ({ ...prevState, error: error }));
      }
    );
}, []);

方案二：合并请求（可选） #

如果不需要分别跟踪两个请求的加载状态，可以用Promise.all合并两个请求，一次性更新状态，避免多次setState的冲突：

useEffect(() => {
  Promise.all([
    fetch("some api", { method: "GET" }).then(res => res.json()),
    fetch("another api", { method: "GET" }).then(res => res.json())
  ])
  .then(([res1, res2]) => {
    setState(prevState => ({
      ...prevState,
      isLoaded: true,
      isLoaded2: true,
      response1: res1,
      response2: res2
    }));
  })
  .catch(error => {
    setState(prevState => ({ ...prevState, error: error }));
  });
}, []);

额外优化：避免内存泄漏 #

如果组件可能在请求完成前卸载（比如用户跳转页面），建议用AbortController取消请求，避免内存泄漏：

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

  fetch("some api", { method: "GET", signal })
    .then(res => res.json())
    .then(
      res => setState(prevState => ({ ...prevState, isLoaded: true, response1: res })),
      error => {
        if (error.name !== 'AbortError') {
          setState(prevState => ({ ...prevState, isLoaded: false, error: error }));
        }
      }
    );

  fetch("another api", { method: "GET", signal })
    .then(res => res.json())
    .then(
      res => setState(prevState => ({ ...prevState, response2: res, isLoaded2: true })),
      error => {
        if (error.name !== 'AbortError') {
          setState(prevState => ({ ...prevState, error: error }));
        }
      }
    );

  // 组件卸载时取消请求
  return () => controller.abort();
}, []);

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