React中state已更新但组件未重新渲染该如何解决？

问题根因 #

你当前的写法直接修改了原state的引用值，不符合React的状态更新规则：const aux = fields赋值的是原数组的内存引用，后续修改aux[id].editable本质是直接修改原state的内容，调用setFields(aux)时传入的还是原数组引用，React浅比较后判定状态未发生变化，因此不会触发组件重渲染。你看到的editable属性更新只是直接修改原对象的结果，没有走React的状态更新流程，自然不会触发视图同步。

两种符合React规范的写法都可以解决问题，核心都是创建新的数组/对象引用，让React识别到状态变化：

• 方案1：通过map遍历生成全新数组（最推荐）

  const toggleClass = (id) => {
    const newFields = fields.map((field, index) => 
      index === id ? {...field, editable: true} : field
    )
    setFields(newFields)
  }
  

  该方案全程不修改原state的任何内容，完全遵循不可变更新原则，适合所有场景，后续维护成本更低。
• 方案2：展开原数组生成新引用后修改对应项

  const toggleClass = (id) => {
    // 展开原数组生成新的数组引用
    const newFields = [...fields]
    // 被修改的对象也需要创建新引用，避免修改原state对象
    newFields[id] = {...newFields[id], editable: true}
    setFields(newFields)
  }
  

  该方案写法更简洁，适合数组长度较短的业务场景，运行效率更高。

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