TypeScript环境下React useState数组状态更新差异问题咨询

核心原因：React useState 是基于引用浅比较判断是否触发重渲染的 #

React 的状态更新逻辑中，当你调用 setXxx 传入新状态时，会先对比新旧状态的引用是否完全相等，如果引用没有变化，React 会认为状态没有更新，直接跳过组件重渲染，视图就不会同步最新值。

能正常生效的写法逻辑

你在调用 setListContent 时用了展开运算符 [...listContent]，相当于创建了一个全新的数组引用，哪怕数组内部的元素对象还是原来的引用，只要数组本身的引用变了，React 就会判定状态更新，触发重渲染，所以你修改的 title 就能在视图上展示出来。

写法一、写法二失效的原因

两种写法本质没有任何区别，都属于「直接修改原状态的内部属性 + 给setListContent传原状态的引用」：

• 你执行 let listJson = listContent 只是给原状态数组多绑定了一个变量名，没有生成新的数组，两者指向内存里完全相同的数组对象
• 你修改数组内部元素的属性之后，直接把原数组的引用传给 setListContent，React 浅对比发现引用和之前的状态完全一致，就不会触发重渲染，视图自然不会更新
  注：此时你的状态值其实已经被修改，只是没触发视图刷新而已

更规范的写法建议

你当前能生效的写法属于「直接修改原状态内部属性」，不符合React的不可变数据原则，可能会引发意料之外的副作用，更推荐的写法是完全基于原状态生成新的状态数据：

const updateTitleTable = (value: string, index: number) => {
  setListContent(prevList => 
    prevList.map((item, idx) => 
      idx === index ? { ...item, title: value } : item
    )
  )
}

这种写法既不会修改原状态，也能保证数组、被修改的元素都是全新的引用，完全符合React的状态更新规范。

内容的提问来源于stack exchange，提问作者WEB Last Wolf