如何将对象赋值给React Hook的setFormData（react-hook-form使用问题）

核心错误原因 #

• React useState 返回的第二个值setFormData是状态更新函数，不能直接用=赋值，直接赋值会覆盖这个函数本身，不会触发状态更新，也不会修改formData的值
• 状态更新是异步操作，调用setFormData后当前渲染周期内拿到的formData还是更新前的旧值，所以直接打印会为空

正确实现代码 #

你需要调用setFormData方法，把表单返回的data传入即可，解构整合的写法如下：

const onSubmit = (data) => {
  Swal.fire('Congratulation!', completeFormStep(), 'success');
  // 方法1：直接传入整个data（适合formData只存表单数据的场景）
  // setFormData(data)
  // 方法2：解构赋值，和上面效果等价，也可以额外追加其他自定义字段
  setFormData({...data}) 

  // 这里打印的是当前渲染周期的旧formData，拿不到新值属于正常现象
  console.log('当前旧formData：', formData); 
  // 直接打印data就能拿到最新的表单提交值
  console.log('最新表单数据：', data); 
};

// 如果需要在formData更新后做操作，添加useEffect监听即可
useEffect(() => {
  console.log('formData更新完成，最新值：', formData)
}, [formData])

特殊场景补充 #

如果你的formData初始值里还有其他和表单无关的字段，不想被覆盖，可以用函数式更新保留原有字段：

setFormData(prevState => ({
  ...prevState, // 保留原有所有字段
  ...data // 仅覆盖表单返回的同名字段
}))

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