React并发多API调用后更新本地状态仅保留最后一项的问题解决

你猜得完全没错——问题根源就是React状态更新的异步特性+闭包捕获旧状态在搞鬼！当你在循环里连续调用setState时，每个setState捕获的都是组件挂载时的初始状态数组，导致每次更新都直接用当前处理后的对象替换了整个数组，而不是在最新的数组基础上修改，最后自然就只剩最后一次更新的对象了。

核心解决方案：用函数式状态更新替代直接传值 #

React的setState（包括useState返回的setter）支持传入一个函数，这个函数会接收当前最新的状态作为参数，返回新的状态。这样就能彻底避开闭包捕获旧状态的坑，每次更新都基于最新的状态来操作。

具体实现思路 #

1. 依然保持并发发起所有API调用（用setTimeout模拟的话，就是循环触发每个请求）
2. 每个请求完成后，调用函数式的setter，找到对应id的对象并更新，确保其他对象不受影响

代码示例 #

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: 'Adam' },
    { id: 2, name: 'Michael' },
    { id: 3, name: 'Joseph' },
    { id: 4, name: 'Noah' }
  ]);

  // 模拟API调用：根据用户信息返回带email的对象
  const fetchUserEmail = (user) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          ...user,
          email: `${user.name.toLowerCase()}@gmail.com`
        });
      }, Math.random() * 1000); // 随机延迟，模拟真实API的响应时差
    });
  };

  useEffect(() => {
    // 循环发起所有并发请求，不用等前一个完成
    users.forEach(user => {
      fetchUserEmail(user).then(updatedUser => {
        // 函数式更新：用最新的状态prevUsers来修改
        setUsers(prevUsers => {
          // 遍历数组，替换对应id的用户，其他用户保持原样
          return prevUsers.map(u => 
            u.id === updatedUser.id ? updatedUser : u
          );
        });
      });
    });
  }, []); // 空依赖，只在组件挂载时执行一次

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email || 'Loading email...'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

为什么这个方案能解决问题？ #

• 函数式更新：setUsers(prevUsers => ...) 里的prevUsers是React实时传递的最新状态，不会被闭包里的旧值卡住，每次更新都是在当前最新数组的基础上修改。
• 并发请求：所有API调用是同时发起的，完全符合你要的并发需求，不会因为等待前一个请求而拖慢性能。
• 实时反馈：每个请求完成后立即更新状态，用户能看到每个用户的email依次加载出来，体验比等全部完成再更新要好得多。

关于你提到的useEffect的小误解 #

你之前担心useEffect会等待前一次API调用完成才发起下一次，其实完全不会！在上面的代码里，我们在useEffect里直接循环调用了所有fetchUserEmail，这些请求是同时发送出去的，useEffect只是负责在组件挂载时触发这一批请求而已，和顺序执行没有关系。

如果担心users变化导致useEffect重复触发，我们把fetchUserEmail放到useEffect内部，或者在初始化时把用户数组存到一个变量里，就像示例里那样用空依赖数组，确保只执行一次。

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