React中input绑定state对象属性时输入无法更新的修复方法

React 触发状态更新重渲染的判断逻辑是对状态值做引用相等校验：

• 原始类型值（字符串、数字、布尔值等）只要值变化，引用就会变化，能正常触发更新
• 对象/数组这类引用类型值，如果你直接修改原对象自身的属性，对象本身的内存引用没有改变，React 会判定状态没有发生变化，跳过重渲染流程，这就是绑定的输入框内容不同步的核心原因。

你当前代码里的错误逻辑就是直接修改了原有data对象的test属性，再把原对象传给setData，引用没变化所以不会触发视图更新。

更新对象类型的state时，必须创建一个全新的对象副本，在副本上修改需要更新的属性，再把新对象传入状态更新函数，保证引用发生变化触发重渲染。单层属性的对象直接用对象展开运算符做浅拷贝即可，修复后的完整代码如下：

import React from "react";

export function App() {
  const [data, setData] = React.useState({
    test: "hello"
  });
  
  const change = (e) => {
    setData({
      ...data, // 拷贝原有对象的所有属性
      test: e.target.value // 覆盖需要更新的属性
    });
  };

  return <input value={data.test} onChange={change} />;
}

补充说明：如果你的state是多层嵌套的对象，浅拷贝无法生效，需要逐层做拷贝，或者使用Immer这类专门处理不可变数据的库简化更新逻辑。

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