React Hook Form 无法正常提交POST请求 表单默认走GET参数暴露在地址栏

问题根因排查 #

你遇到的表单默认走GET提交的核心原因是组件代码存在语法错误，导致React组件渲染失败，你绑定的handleSubmit函数根本没有生效，表单触发了原生默认提交行为。

具体问题及修复方案 #

1. 缺少React Hook引入
   你在代码中使用了useState、useEffect两个React内置Hook，但没有从react包中导入，这会直接导致组件渲染抛出未定义错误，后续的提交逻辑完全不生效。
   修复方式：修改首行import语句为：

import React, { useState, useEffect } from 'react';

2. 密码输入框属性重复
   两个密码输入框的id、name属性都设置为了password，属于非法的DOM重复ID，会导致表单取值、字段绑定出现异常。
   修复方式：修改确认密码输入框的对应属性：

<TextField
  variant="outlined"
  required
  fullWidth
  name="confirmPassword"
  label="Confirm Password"
  type="password"
  id="confirmPassword"
  autoComplete="new-password"
  value = {confirmPassword}
  onBlur={e => setConfirmPassword(e.target.value)} 
  onChange={e => setConfirmPassword(e.target.value)} 
/>

3. 冗余属性可删除

• 提交按钮本身就在form标签内部，不需要额外加form = "signup"属性
• form标签上的method="POST"是原生表单提交用的，你已经通过自定义handleSubmit处理提交逻辑，这个属性也可以删除，不影响功能

修复上述问题后，handleSubmit会正常触发，你写的e.preventDefault()会阻止原生表单提交行为，后续的POST请求就可以正常发出了。

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