反应注册表单中的混合有效负载数据字段

Question

我真的很新手我创建了一个注册表单，但是当发布数据时，值是混合的我创建了 onchange 和 onsubmit 来跟踪更改并将其提交到后端服务器但是我得到了 badrequest 因为值在 payload

中混合了

const Signup = ({ signup, isAuthenticated }) => {
  const [accountCreated, setAccountCreated] = useState(false);
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    email: "",
    first_name: "",
    last_name: "",
    profile_type: "",
  });

 

  const { username, password, email, first_name, last_name, profile_type } = formData;

  const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });

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

    signup(username, password, email, first_name, last_name, profile_type);
    setAccountCreated(true);
  };

  if (isAuthenticated) {
    return <Redirect to="/" />;
  }
  if (accountCreated) {
    return <Redirect to="/login" />;
  }

  return (
    <div className="container mt-5">
      <h1>Sign Up</h1>
      <p>Create your Account</p>
      <form onSubmit={(e) => onSubmit(e)}>
      <div className="form-group">
          <input
            className="form-control"
            type="text"
            placeholder="Username"
            name="username"
            value={username}
            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="password"
            placeholder="Password"
            name="password"
            value={password}
            onChange={(e) => onChange(e)}
            minLength="6"
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="email"
            placeholder="Email*"
            name="email"
            value={email}
            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="text"
            placeholder="First Name*"
            name="first_name"
            value={first_name}
            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            className="form-control"
            type="text"
            placeholder="Last Name*"
            name="last_name"
            value={last_name}
            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <select
            className="form-control"
            name="profile_type"
            onChange={(e) => onChange(e)}
            required            
          >
            <option value="">--------</option>
            <option value="STD">
              Student
            </option>
            <option value="PRF">
              Professor
            </option>
          </select>
        
        </div>
        <button className="btn btn-primary" type="submit">
          Register
        </button>
      </form>
      <p className="mt-3">
        Already have an account? <Link to="/login">Sign In</Link>
      </p>
    </div>
  );
};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
});

export default connect(mapStateToProps, { signup })(Signup);

当我提交时，这就是我在有效载荷中得到的所有值混合但电子邮件和个人资料类型正确我该如何解决这个问题？

{username: "lastname", password: "firstname", email: "email@mail.com", first_name: "username1",…}
email: "email@mail.com"
first_name: "username1"
last_name: "Password"
password: "firstname"
profile_type: "STD"
username: "lastname"

变成这样

{username: "username1", password: "Password", email: "email@mail.com", first_name: "firstname",…}
email: "email@mail.com"
first_name: "firstname"
last_name: "lasttname"
password: "Password"
profile_type: "STD"
username: "username1"

Answer 1

尝试检查注册方法中的参数顺序.. 或在每个输入的 onChange 方法中尝试此代码 (e) => setFormData({...formData, property name: e.target.value})。

反应注册表单中的混合有效负载数据字段

mixed payload data fields in react signup form

reactjs

react-native

web

frontend