我的反应表单未正确提交

问题描述

我的反应形式有问题。

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

问题出在哪里？

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;

谢谢。

解决方法

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>
  );
};