React useState为何无法直接修改prevValue对象并触发组件渲染？

直接修改prevValue的属性并返回原对象不会触发组件更新，核心原因在于React的状态更新机制依赖于状态值的引用变化：

• React判断是否需要重新渲染组件时，会对新旧状态进行浅比较。对于对象类型的状态，它只会检查对象的引用地址是否相同，不会深入对比对象内部的属性值。
• 你写的prevValue[name] = value; return prevValue;是直接修改了原状态对象的属性，返回的还是同一个对象引用。React对比新旧状态时发现引用一致，会判定状态没有变化，因此跳过组件更新流程，导致UI无法同步显示输入的内容。

比如你在代码里打印prevValue能看到属性值变化，但组件没更新——这就是因为原对象的引用没改，React没检测到状态变更。

而你用if分支返回新对象的写法能生效，是因为每次都返回了一个全新的对象（比如{fName: value, lName: prevValue.lName, email: prevValue.email}），这个新对象的引用和原prevValue不同，React能识别到状态变化，从而触发组件重新渲染。

解决这类问题的通用写法是使用扩展运算符创建新对象，保证返回新的引用：

setContact((prevValue) => {
  return {
    ...prevValue,
    [name]: value
  };
});

这种方式会复制原对象的所有属性，再覆盖需要更新的属性，既保留了原状态的其他数据，又生成了新的对象引用，能正确触发React的状态更新和组件渲染。

内容的提问来源于stack exchange，提问作者M.s