React Hooks注册表单受控组件输入无法更新问题排查

• 状态更新逻辑错误
  若表单状态是对象类型，更新时必须合并原有属性，不能直接替换。错误写法会丢失其他字段，导致输入框无法联动更新：

  const [formData, setFormData] = useState({ name: '', email: '', password: '' });
  // 错误：仅更新当前字段，丢失其他状态
  const handleChange = (e) => {
    setFormData({ [e.target.name]: e.target.value });
  };
  

  正确写法需展开原有状态：

  const handleChange = (e) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };
  

• 输入框name属性与状态字段不匹配
  输入框的name属性必须和formData中的字段名完全一致，否则状态无法对应更新：

  // 错误：name属性与状态字段名不符
  <input type="text" name="username" value={formData.name} onChange={handleChange} />
  // 正确：name属性对应状态字段
  <input type="text" name="name" value={formData.name} onChange={handleChange} />
  

• 直接修改状态对象
  React状态是不可变的，不能直接修改状态对象的属性，必须通过setFormData方法更新：

  // 错误：直接修改状态
  formData.email = e.target.value;
  // 正确：使用状态更新函数
  setFormData(prev => ({ ...prev, email: e.target.value }));
  

• 事件处理函数绑定错误
  确保onChange事件绑定的是函数引用，而非立即执行函数：

  // 错误：渲染时立即执行函数，无法响应输入事件
  <input type="password" name="password" value={formData.password} onChange={handleChange()} />
  // 正确：绑定函数引用
  <input type="password" name="password" value={formData.password} onChange={handleChange} />
  

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