React表单每次State变更自动提交问题求助

核心问题 #

你表单里的两个click按钮没指定type属性，在HTML表单中，<button>默认的type是submit——这意味着点击它们时，不仅会执行setState切换状态，还会触发表单的提交事件，这就是你看到“state变更时表单重新提交”的原因。

修复步骤 #

1. 给两个切换状态的按钮添加type="button"属性，明确它们是普通按钮，不会触发表单提交；
2. 在handleSubmit里调用e.preventDefault()，阻止表单默认的刷新提交行为，确保通过异步请求提交FormData。

修正后的代码示例 #

const [state, setState] = useState(true)

const handleSubmit = async e => {
  e.preventDefault() // 阻止表单默认提交行为
  const destination = state ? true : false
  // 编写发送FormData到API的逻辑
}

return (
  <form onSubmit={handleSubmit}>
    <div>
      <button type="button" onClick={() => setState(prev => !prev)}>click</button>
      <button type="button" onClick={() => setState(prev => !prev)}>click</button>
    </div>

    // 其他输入项

    <input type="submit" value="Upload" />
  </form>
)

补充说明 #

• 只要给非提交按钮明确type="button"，就能避免误触发表单提交；
• e.preventDefault()是必要的，否则即便处理了异步请求，表单默认的刷新行为仍会执行，可能导致页面跳转或重新加载。

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