React使用useState更新嵌套状态后组件未重新渲染问题解决

问题根因 #

• React的状态更新是基于引用比较判断是否触发重渲染，你的代码属于原地修改原有状态对象：
  1. 你直接修改了prev旧状态对象内部的属性，最终返回的还是原来的状态对象引用
  2. 即使内部属性值发生了变化，React检测到状态根引用没有变更，就会判定状态未更新，自然不会触发组件重渲染

修复后的代码 #

按照React不可变更新原则，嵌套结构每一层需要更新的节点都要生成新引用：

const workToggleHandler = (work) => {
  setUserInfo((prev) => {
    // 返回全新的userInfo对象
    return {
      ...prev,
      // 生成新的works数组
      works: prev.works.map((p) => {
        // 匹配到目标条目时返回全新的条目对象，切换isEditing属性
        if (p._id === work._id) {
          return {
            ...p,
            isEditing: !p.isEditing
          }
        }
        // 非目标条目直接返回原对象即可
        return p
      })
    }
  })
}

补充说明 #

• 所有React状态修改都要遵循不可变原则，禁止直接修改原状态对象/数组，原地修改除了不会触发渲染外，还可能引发其他不可预期的状态异常

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