React setState更新数组状态后UI未刷新问题排查求助

问题原因 #

• 核心问题是更新state时违反了React的不可变数据原则
• 你在generateItemsState中使用Object.assign(updatedProject, { items: testItems })时，第一个参数传入了已经存在于state中的updatedProject对象，Object.assign会直接修改这个原对象的属性，最终返回的还是原对象的引用，没有生成新对象。
• React默认通过浅比较判断state是否需要更新：仅对比state字段的引用是否变化。你把引用和原state完全相同的updatedProject传入setState，React会认为该字段没有更新，因此不会触发UI重渲染，新增内容自然不会展示。

修复方案 #

修改generateItemsState中的赋值逻辑，生成全新的updatedProject对象即可，两种写法二选一：

// 方案1：给Object.assign传入空对象作为第一个参数，生成新对象
newState.updatedProject = Object.assign({}, updatedProject, { items: testItems });

// 方案2：用对象扩展运算符，写法更简洁
newState.updatedProject = { ...updatedProject, items: testItems };

修改后updatedProject的引用会发生变化，React浅比较可以识别到state更新，就会触发UI重新渲染展示新增的条目。

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