React 循环更新数组类型 State 时反复覆盖前序值的问题咨询

这个问题本质是React的两个运行机制叠加导致的，不存在你数组追加的语法写错的问题：

• 闭包捕获的旧状态失效：你的整个循环是在单次组件渲染的执行上下文中运行的，循环内引用的display变量，是当前渲染周期闭包捕获到的初始状态值，不是实时更新后的最新状态。你每次执行display.concat(newItem)的时候，参考基准都是最开始的那份初始数组，相当于每次生成的新状态都是「初始数组+单个newItem」，根本没有在上一次更新的结果上继续追加。
• 状态更新的批处理覆盖特性：React在同一次执行上下文（比如事件回调、异步逻辑块）中触发的多次状态更新，如果传入的是固定值而非更新函数，后面的更新会直接覆盖前面的更新。你连续在循环里调用的多次setDisplay，因为计算基准都是同一个旧的display，最后一次循环生成的状态值会直接顶替前面所有的更新结果，最终表现为“每次新增都把之前的内容替换掉”。

• 把所有状态更新改成函数式更新写法，让React把最新的前序状态作为参数传递给更新回调，绕开闭包捕获旧值的问题：
  把原来的代码替换成：

  setDisplay(prevDisplay => prevDisplay.concat(newItem))
  

• 性能优化方案：你当前在for循环里串行等待接口返回、每拿到一个数据就触发一次状态更新，会造成不必要的多次重渲染。可以先把所有要追加的新条目收集完成，再一次性触发状态更新：

  const collectedNewItems = []
  for (const item of urls) {
    const url = item.url
    const ID = url.slice((url.search("=",0) + 1), url.length)
    const YtResponse = GetByIdYouTube(ID)
    const data = await YtResponse
    const date = item.date
    collectedNewItems.push({data, url, date})
  }
  // 所有数据拉取完成后，一次性追加到目标状态
  setDisplay(prev => [...prev, ...collectedNewItems])
  

注意兼容边界：如果display的初始值可能为null/undefined，需要在更新回调里做空值兜底，比如写成prev => (prev || []).concat(newItem)，避免第一次状态更新时调用数组方法报错。

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