React表单需点击两次提交才能向Express后端传值问题求助

问题根源 #

1. React状态更新的异步性：你在formSubmitHandler中调用setData更新状态后，立刻尝试读取data并发送请求。但React的setState是异步操作，此时data仍为更新前的初始空值，导致第一次提交发送空数据；第二次提交时data才更新为第一次的输入内容，所以能发送有效值。
2. 冗余状态存储：你已经通过enteredFullName、enteredemail等状态维护了每个输入框的值，额外将这些值复制到data状态完全是多余步骤，反而引入了异步更新的问题。

解决方案 #

直接用现有输入状态组装请求数据，删除冗余的data状态，修改formSubmitHandler即可：

const formSubmitHandler = async (e) => {
  e.preventDefault();
  // 直接组装最新的表单数据
  const submitData = {
    fullname: enteredFullName,
    email: enteredemail,
    password: enteredPassword,
    dob: enteredDob,
    gender: enteredGender,
  };

  console.log(submitData); // 这里能直接拿到最新输入值

  // 使用axios发送POST请求（数据放在请求体，而非URL参数）
  try {
    const res = await axios.post("/register", submitData);
    console.log(res.data);
    // 提交成功后重置表单
    setenteredFullName("");
    setenteredemail("");
    setenteredPassword("");
    setenteredDob("");
    setenteredGender("");
  } catch (err) {
    console.error(err.response.data);
  }
};

同时删除开头冗余的data状态定义：

// 删掉这部分代码
const [data, setData] = useState([
  {
    fullname: undefined,
    email: undefined,
    password: undefined,
    dob: undefined,
    gender: undefined,
  },
]);

补充说明 #

你原来的请求写法（把数据拼在URL参数里）不符合POST请求的规范，POST请求应将数据放在请求体中，后端可通过req.body直接获取，无需手动解析URL参数。

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