React State中直接修改对象后传入setFullName为何失效？

为什么直接修改属性不生效？ #

React 判断状态是否需要更新的核心逻辑是浅比较：它会对比新旧状态的引用地址是否相同。

• 当你直接修改fullName的属性（比如fullName.fName = '张三'），fullName本身的引用地址完全没变——还是原来那个对象。React 对比后会认为状态没变化，自然不会触发组件重新渲染，所以界面看不到更新。
• 而用新对象的写法（比如setFullName({...fullName, fName: '张三'})），是通过扩展运算符创建了一个全新的对象，这个新对象的引用地址和原fullName完全不同。React 检测到引用变化，就会判定状态已更新，触发组件重新渲染，界面也就跟着同步了。

必须传入State内声明的原对象吗？ #

不需要，但必须保证传入的是具有新引用值的对象。
除了扩展运算符，你还可以用这些方式创建新对象：

• 用Object.assign：setFullName(Object.assign({}, fullName, {lName: '李四'}))
• 如果是嵌套对象，需要深层更新时，可以用 Immer 这类库简化操作（不用手动层层拷贝）

核心原则就是：React 状态更新遵循不可变更新规则——永远不要直接修改原状态对象，而是返回一个新的对象/值，让 React 能准确识别状态变化。

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