React中useState合并两个数组失效问题求助

问题场景 #

你通过React的useState声明了数组状态：

const [pending, setPending] = useState([]);

随后发起两个并行API请求，尝试将返回的数组数据合并到pending中，但操作后状态未正确累加，还出现了报错，待合并的是两个结构相似的用户数据数组。

核心原因 #

两个API请求是异步并行执行的，回调函数中捕获的pending是组件初始渲染时的空数组。当两个回调依次执行时，后执行的更新会直接基于空数组+自身数据覆盖前一个更新的结果，而非在最新状态上累加；同时如果接口返回数据格式不符合预期（比如非数组），也会触发展开操作的报错。

解决方法 #

方法1：使用函数式更新保证状态最新 #

将setPending改为函数式更新，每次更新都基于最新的状态值，同时添加数据格式校验：

api.request('/api/director-user', 'GET')
  .then(res => {
    if (res.status === 200 || res.status === 201) {
      // 用prev获取最新的pending状态，同时校验数据是否为数组
      setPending(prev => [...prev, ...(Array.isArray(res.data.data) ? res.data.data : [])]);
    }
  })

api.request('/api/company-user', 'GET')
  .then(res => {
    if (res.status === 200 || res.status === 201) {
      setPending(prev => [...prev, ...(Array.isArray(res.data.data) ? res.data.data : [])]);
    }
  })

方法2：合并并行请求统一更新（可选） #

如果希望两个请求都完成后再一次性更新状态，用Promise.all合并请求，减少状态更新次数：

Promise.all([
  api.request('/api/director-user', 'GET'),
  api.request('/api/company-user', 'GET')
]).then(results => {
  const combinedData = results.reduce((total, res) => {
    if (res.status === 200 || res.status === 201) {
      // 只合并合法的数组数据
      return total.concat(Array.isArray(res.data.data) ? res.data.data : []);
    }
    return total;
  }, []);
  setPending(combinedData);
})

关键提示 #

• 函数式更新是React处理异步状态更新的常规方案，能彻底避免闭包导致的旧状态捕获问题。
• 添加Array.isArray校验是为了兼容接口返回非数组的异常情况，避免报错。

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