我的反应表单没有正确提交答案

【问题标题】：My react form is not submitting correctly我的反应表单没有正确提交
【发布时间】：2021-04-02 08:52:02
【问题描述】：

我的 react 表单有问题。

如果我在提交按钮上单击两次，那么此时，表单会正确提交并将我的各种信息发送到数据库。

问题出在哪里？

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

const Register = () => {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();

  const onSubmit = (e) => {
    e.preventDefault();
    setUsername(document.querySelector(".usernameInput").value);
    setPassword(document.querySelector(".passwordInput").value);
    const user = {
      username: username,
      password: password
    }
      axios.post('http://localhost:5000/users/add', user)
        .then(res => console.log(res.data));

    console.log("lancement du formulaire");
  }

  return (
    <div>
      <h1>TEST Form</h1>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Username</label>
          <input required type="text" className="usernameInput" />
        </div>
        <div className="form-group">
          <label>Password</label>
          <input required type="password" />
        </div>
        <div className="form-group">
      <input type="submit" value="Create User" className="btn btn-primary" className="passwordInput" />           </div>
       </form>
    </div>
  )
}
  
 export default Register;

谢谢。

【问题讨论】：

标签： reactjs forms axios submit

【解决方案1】：

useState 是异步的，就像类组件中的 setState 一样。您不能在一行更新状态并假设它已经在下一行更改。您可能会使用未更改的状态。

当您创建user 对象时，状态尚未更新。

您需要在提交按钮上单击两次，因为：

第一次单击时，您将 username 和 password 状态的值设置为输入值，但由于状态未更新，您发送的 user 对象的属性为空
在第二次单击时（状态更新时），您可以发送user 对象，因为user 对象包含状态值

以下应该可以工作（尽管我建议不要使用它）：

const onSubmit = (e) => {
  e.preventDefault();

  const user = {
    username: document.querySelector('.usernameInput').value,
    password: document.querySelector('.passwordInput').value,
  };
  
  axios
    .post('http://localhost:5000/users/add', user)
    .then((res) => console.log(res.data));

  console.log('lancement du formulaire');
};

但是，如果您从不使用状态username 和password，为什么还要使用它们呢？如果您已经添加了状态来存储输入值，您可以在更改时更新它们并在表单提交时提交它们：

const Register = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (e) => {
    e.preventDefault();

    const user = {
      username,
      password,
    };

    axios
      .post('http://localhost:5000/users/add', user)
      .then((res) => console.log(res.data));

    console.log('lancement du formulaire');
  };

  return (
    <div>
      <h1>TEST Form</h1>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Username</label>
          <input
            required
            type="text"
            className="usernameInput"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div className="form-group">
          <label>Password</label>
          <input
            required
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div className="form-group">
          <input
            type="submit"
            value="Create User"
            className="btn btn-primary"
            className="passwordInput"
          />{' '}
        </div>
      </form>
    </div>
  );
};

【讨论】：