React中使用对象存储表单状态时输入框无法更新的问题排查

你遇到的核心问题是直接修改了React状态对象的引用，导致React无法检测到状态变化，组件没有重新渲染，所以输入框的value始终停留在初始空对象对应的undefined，进而显示为空字符串。

为什么你的代码无效？ #

看这段关键代码：

const onInputChange = (event) => {
  formInputs[event.target.name] = event.target.value;
  setFormInputs(formInputs);
  console.log("onInputChange => formInputs", formInputs);
};

你直接修改了formInputs这个状态对象的属性，然后把同一个对象引用传给setFormInputs。React的状态更新依赖于引用变化来判断是否需要重新渲染组件——如果前后状态是同一个对象，React会认为状态没有改变，因此不会触发组件更新，输入框的value自然不会同步新的输入内容。

正确的实现方式 #

要遵循React状态的不可变性原则，每次更新状态时都创建一个新的对象，而不是修改原对象。推荐使用函数式更新（确保获取到最新的前状态）和展开运算符来生成新对象：

const [formInputs, setFormInputs] = React.useState({});

const onInputChange = (event) => {
  const { name, value } = event.target;
  // 使用函数式更新，基于前一个状态创建新对象
  setFormInputs(prevFormInputs => ({
    ...prevFormInputs, // 复制原有属性
    [name]: value      // 更新当前输入框对应的属性
  }));
};

关于value={formInputs.username || ""}的说明 #

这个写法本身是没问题的——当formInputs.username为undefined（初始状态或还没输入时），会 fallback 到空字符串，避免输入框出现undefined的显示问题。现在只要状态更新的逻辑正确，这个写法就能正常工作，不用注释掉。

为什么注释条件后看似正常？ #

如果去掉|| ""，输入框的value会是undefined，此时React会把输入框当作非受控组件处理（因为value为undefined时等价于没设置value），输入内容会直接显示，但这违背了受控组件的设计原则——受控组件的输入值应该完全由状态驱动，这样你才能统一管理表单数据，比如做表单验证、重置等操作。

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