React表单提交时JSON.stringify返回空对象/null问题排查

提交内容为空对象的核心原因是用户输入的文本从未同步到React的form状态中，具体错误点如下：

• textarea未做受控组件绑定：代码中textarea仅写了占位符，被注释掉的value绑定没有生效，也没有绑定onChange事件监听输入，用户输入的内容完全没有被状态管理捕获，form.message始终为初始空值。
• 状态更新逻辑绑定位置错误：你将updateForm写在了按钮的onClick事件中，取值为按钮自身的e.target.value，但按钮的value属性绑定的是未定义的form.name，根本获取不到textarea中的输入内容。
• 按钮type属性配置错误：按钮设置的type="text"不是合法的表单按钮类型，无法正确触发表单的onSubmit提交逻辑。

1. 修改textarea部分，添加受控绑定，实时同步输入内容到状态：

<textarea
  className="message"
  placeholder="Type something!"
  value={form.message}
  onChange={(e) => updateForm({ message: e.target.value })}
></textarea>

2. 修改提交按钮配置，移除错误绑定在按钮上的状态更新逻辑，修正按钮type为submit：

<button
  className="button"
  type="submit"
  onClick={(e) => {
    magic();
    handleButtonClick();
  }}
>
  <span className="default">Ping</span>
  <span className="success">Wohoo! You Pinged Me!</span>
  <div className="left"></div>
  <div className="right"></div>
</button>

修改完成后触发提交，onSubmit中打印的JSON.stringify(newMessage)将正常输出包含用户输入内容的对象，后端可正常接收到message字段值，不会再返回null。

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