React父组件State更新后子组件渲染异常问题求助

核心问题 #

你遇到的渲染不稳定问题，根源在于修改state时没有创建新的数组引用。代码中let array2 = array1;只是复制了数组的内存引用，而非生成新数组。React的状态更新机制依赖引用变化识别状态变更，传入同一个引用给setData1时，React会认为状态未变化，不会触发组件重新渲染，导致子组件拿到的state处于新旧交替的不稳定状态，所以渲染结果时好时坏。

修复步骤 #

1. 创建新数组引用更新state
   替换原有赋值方式，通过扩展运算符、Array.from或slice()生成新数组，确保React能检测到状态变化：

   // 方式1：扩展运算符
   setData1([...array1]);
   // 方式2：Array.from
   setData1(Array.from(array1));
   // 方式3：slice()
   setData1(array1.slice());
   

2. 确保数组数据完整后再更新state
   如果array1是异步请求的结果，要确认数据完全获取（比如在fetch或axios的回调/then块内）再执行setData1，避免更新不完整的数组。

3. 列表渲染添加key属性
   子组件的map循环中，给每个<li>添加唯一的key属性，避免组件复用导致的渲染异常：

   data1.map((data, index) => {
     // 优先使用数据自身的唯一id，无唯一id时可临时用index（不推荐频繁变动的列表）
     return <li key={index}>{data.name}</li>
   })
   

验证效果 #

修改后，React会正确识别state变更，触发父组件和子组件重新渲染，子组件就能稳定渲染所有列表项了。

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