输入第二个字符触发Uncaught TypeError错误的技术问询

错误原因 #

你在handleChange里的状态更新逻辑完全错误：
setObject((object) => (object.value = e.target.value)) 这行代码犯了两个关键问题：

1. 直接修改原状态对象object，违反了React状态不可变的核心原则；
2. 赋值表达式object.value = e.target.value的返回值是字符串（比如第一次输入"a"，返回值就是"a"），导致状态从原本的对象类型直接变成了字符串类型。

第二次输入时，状态已经是字符串，你试图给字符串添加value属性，自然触发类型错误。

正确写法 #

方式一：函数式更新（推荐，依赖之前状态时使用）

用展开运算符复制原对象的所有属性，再覆盖value，返回一个全新的对象：

const handleChange = (e) => {
  setObject((prevObject) => ({
    ...prevObject,
    value: e.target.value
  }));
};

方式二：直接更新（不依赖之前状态时使用）

同样通过展开运算符保留原对象属性，仅更新value：

const handleChange = (e) => {
  setObject({
    ...object,
    value: e.target.value
  });
};

补充说明 #

React依赖状态的引用变化触发组件重渲染，所以必须返回新的对象/数组，不能直接修改原状态。直接修改原状态不仅会导致渲染异常，还会像你遇到的这样，因为状态类型突变引发报错。

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