我的 React 表单未正确提交

Question

我的反应形式有问题。

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

问题出在哪里？

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;

谢谢。

Answer 1

useState 是异步的，就像 class 组件中的 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>
  );
};

我的 React 表单未正确提交

My react form is not submitting correctly

reactjs

forms

axios

submit