React父组件值更新时子组件Children未触发更新问题排查

你此前总结的「key必须为对象类型」是完全错误的结论，React官方明确规定key属性的值仅支持字符串或数字类型，禁止传入数组、对象等引用类型。

你遇到的更新不一致问题本质是引用比较逻辑导致的：

• 你给单个Child组件绑定了key={array}，本质是把数组的引用地址作为key值
• 执行新增/删除操作时，你更新store时返回了新的数组实例，数组引用发生变化，对应的key值也随之变化，React会直接卸载旧的Child组件、挂载全新的组件实例，新实例自然能拿到最新的props
• 执行修改操作时，你直接修改了原数组内部的元素，没有生成新的数组实例，数组本身的引用没有变化，因此key值不变，React判定不需要重新挂载组件；同时你传给Child的items属性和原数组是同一个引用，如果Child用了React.memo做性能优化，默认的浅比较逻辑会判定props没有发生变化，因此不会触发子组件重渲染。

1. 移除给单个Child组件绑定key={array}的错误写法：只有渲染列表项时才需要设置key，单个组件不需要额外绑定key属性
2. 保证store中数组更新时始终返回新的数组实例，禁止直接修改原数组：
   比如修改数组元素时可以用map返回新数组：

   const updatedArray = originalArray.map(item => {
     if(item.id === 2) {
       // 返回新的对象实例
       return {...item, value: 'value update'}
     }
     return item
   })
   

   用新数组替换store中的旧数组，确保引用发生变化，子组件就能正常检测到props更新。
3. 如果后续需要渲染数组对应的列表项，要使用元素自身的唯一标识（比如你数据中的id字段）作为key，禁止用数组本身、数组索引作为key。

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