React 通过prop传递的数组状态更新后仅二次变更才重渲染的问题

核心问题定位 #

• 子组件独立维护了timestamps本地状态，状态更新的执行时序和React的渲染周期错位，是造成“新数据晚一帧渲染”的核心原因
• 代码里对完全同步的数组map操作套了async/await语法，导致原本应该在当前渲染周期执行的逻辑，被事件循环排到微任务队列延后执行：
  你写的await match.scores.map(...)本身没有任何异步操作需要等待，map方法同步遍历完会立刻返回结果数组，但async函数的返回值会被包装成Promise，让后续的setTimestamps调用全部延后到当前渲染提交完成之后才执行。这就直接造成了：你在useEffect里console.log打印的是最新的prop值，但对应的setState调用还没触发，等下一次用户操作触发重渲染时，上一轮的setState才生效——刚好匹配你看到的“第一次加的元素第二次才显示”的现象。
• 列表渲染节点缺少稳定的key属性，React做列表Diff对比时无法准确识别新旧节点的差异，会复用旧的DOM结构，进一步放大渲染滞后的问题。
• 拆分的多段if分支写setState时没有对齐空值判断，连续触发状态更新时容易拿到旧的闭包值，造成状态覆盖。

可直接落地的修复调整 #

1. 移除无意义的async/await包装，把同步计算逻辑放回同步执行流程，让setState的调用落在正确的渲染周期内：

   useEffect(() => {
     if (!match) return
     // 同步计算需要的时间戳数组，不需要异步等待
     const playerScores = match.scores.map(player => player.totalScores ? player.totalScores : [])
     const mergedTimestamps = [
       ...(playerScores[0] || []),
       ...(playerScores[1] || [])
     ].sort((a, b) => a.time - b.time)
     setTimestamps(mergedTimestamps)
   }, [match])
   

2. 给列表渲染的每个Timestamp组件绑定稳定唯一的key值，不要直接用数组索引当key（尤其列表存在动态新增、排序的场景）：

   {timestamps.map(timestamp => {
     const min = Math.floor(timestamp.time / 60);
     const sec = timestamp.time - min * 60;
     const times = `${min}m ${sec}sec`;
     return (
       <Timestamp
         key={timestamp.id || `${timestamp.time}-${timestamp.points}`}
         time={times}
         pointsScored={timestamp.points}
       />
     );
   })}
   

3. 合并冗余的分支判断，统一数组合并逻辑，避免多段独立setState调用造成的状态更新遗漏：
   原来分三段判断“两个数组都存在/只有第一个存在/只有第二个存在”的逻辑，可以直接通过空数组兜底合并成统一的处理流程，减少重复代码的同时避免分支覆盖的问题。

关键概念提示：React的视图更新是跟setState的执行周期绑定的，如果把setState调用放到异步回调里延后执行，哪怕你在回调里拿到了最新的prop值，视图也不会立刻同步更新，只会在下一轮重渲染时才把上一轮延迟的状态提交上去。

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