React循环调用API时useState状态更新异常问题排查与解决

这个问题我之前也碰到过，核心原因是闭包导致的useState状态捕获问题。在你的useEffect回调里，forEach发起的每个异步请求回调，捕获的都是组件第一次渲染时的details初始值（空对象{}）。所以每次执行const newDetails = { ...details }时，都是基于空对象去扩展，最后每个请求完成后都会把details替换成只包含当前ID的对象，后面的覆盖前面的，就出现了你看到的结果。

下面给你两种靠谱的解决方案：

方案1：使用useState的函数式更新 #

React的setState（包括useState的更新函数）支持传入一个函数，这个函数会自动接收当前最新的状态作为参数，返回新的状态。这样就能确保每次更新都是基于最新的状态，而不是闭包里的旧状态。

修改后的代码：

const MyComponent = () => { 
  const [details, setDetails] = useState({}) 
  useEffect(() => { 
    api.getIds().then(res => 
      res.data.ids.forEach(id => 
        api.getDetails(id).then((res) => { 
          // 用函数式更新，获取最新的prevDetails
          setDetails(prevDetails => ({
            ...prevDetails,
            [id]: res.data.details
          }))
        }) 
      ) 
    ) 
  }, []) 
  console.log(details) 
  ... 
}

这个方法不需要调整请求顺序，每个请求完成后都会自动合并到最新的状态里，最终就能得到包含所有ID详情的对象。

方案2：用Promise.all批量处理请求 #

如果不需要关注单个请求的完成顺序，希望所有请求都完成后一次性更新状态，这种方式更高效，还能减少状态更新的次数。

修改后的代码：

const MyComponent = () => { 
  const [details, setDetails] = useState({}) 
  useEffect(() => { 
    api.getIds()
      .then(res => {
        // 把每个ID的请求转成Promise数组，同时保存ID和对应的数据
        const detailPromises = res.data.ids.map(id => 
          api.getDetails(id).then(res => ({ id, data: res.data.details }))
        )
        // 等待所有请求完成
        return Promise.all(detailPromises)
      })
      .then(results => {
        // 把结果合并成一个对象
        const newDetails = results.reduce((acc, { id, data }) => {
          acc[id] = data
          return acc
        }, {})
        setDetails(newDetails)
      })
  }, []) 
  console.log(details) 
  ... 
}

这个方法只会触发一次状态更新，而且能确保所有详情都获取到后再更新，适合对状态更新次数敏感的场景。

额外优化：避免组件卸载后的无效更新（可选） #

为了防止组件卸载后，异步请求还在执行导致控制台警告，可以用AbortController来取消请求：

const MyComponent = () => { 
  const [details, setDetails] = useState({}) 
  useEffect(() => { 
    const controller = new AbortController()
    const signal = controller.signal

    api.getIds({ signal }) // 假设你的API支持传入signal参数
      .then(res => {
        const detailPromises = res.data.ids.map(id => 
          api.getDetails(id, { signal }).then(res => ({ id, data: res.data.details }))
        )
        return Promise.all(detailPromises)
      })
      .then(results => {
        const newDetails = results.reduce((acc, { id, data }) => {
          acc[id] = data
          return acc
        }, {})
        setDetails(newDetails)
      })
      .catch(err => {
        // 忽略取消请求的错误
        if (err.name !== 'AbortError') console.error(err)
      })

    // 组件卸载时取消所有请求
    return () => controller.abort()
  }, []) 
  console.log(details) 
  ... 
}

注意这个优化需要你的API支持接收signal参数，如果API不支持的话，可以跳过这一步。

内容的提问来源于stack exchange，提问作者Barry Michael Doyle