在map循环中调用React setState仅保留最后一条数据如何解决？

问题根因 #

React 的 useState 更新方法是异步的，同一渲染周期内多次调用时会捕获当前作用域的状态快照。你在循环中每次调用 setDataSource 时，读取的都是 useEffect 初始化时的空数组 dataSource，每次更新都会覆盖前一次未生效的更新，最终仅保留最后一条数据。

最优解决方案 #

不要在循环内多次触发状态更新，先批量处理完所有数据后一次性更新状态即可：

const [dataSource, setDataSource] = React.useState([]);
React.useEffect(() => {
  const processedList = orders.map((item, index) => ({
    key: index,
    id: helpers.leftPad(item.oid, 6, 0),
    name: item.cname,
    totalPrice: item.total_price === null ? 'No data' : item.total_price,
    orderDate: item.order_date
  }))
  setDataSource(processedList)
}, [])

补充说明 #

如果确实有逐次更新状态的特殊需求，可以使用 setState 的函数式更新形式，通过回调参数获取上一次的最新状态，避免读取到旧的状态快照：

// 仅做原理演示，该写法性能不如一次性批量更新
React.useEffect(() => {
  orders.forEach((item, index) => {
    setDataSource(prevState => [
      ...prevState,
      {
        key: index,
        id: helpers.leftPad(item.oid, 6, 0),
        name: item.cname,
        totalPrice: item.total_price === null ? 'No data' : item.total_price,
        orderDate: item.order_date
      }
    ])
  })
}, [])

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