Cannot register. Username and password did not pass in the payload when using useRef-CodePudding

I tried to pass the username and password using useRef() to be able to register but after submit it, it said required username and password. I check the network payload at browser, it only has email without username and password.

Below are the code

import { useRef, useState } from "react";
import "./register.scss";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const Register = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [username, setUsername] = useState("");
  const navigate = useNavigate();

  const emailRef = useRef();
  const passwordRef = useRef();
  const usernameRef = useRef();

  // Send email to appear password
  const handleStart = () => {
    setEmail(emailRef.current.value);
  };

  // Send username & password for membership
  const handleFinish = async (e) => {
    e.preventDefault();
    setPassword(passwordRef.current.value);
    setUsername(usernameRef.current.value);
    try {
      await axios.post("auth/register", { username, email, password });
      navigate("/login");
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <div className="register">
      <div className="wrapper">
        <div className="header">
          <img src="./assets/logo.png" alt="" className="logo" />

          <button className="login-btn">Sign In</button>
        </div>
      </div>

      <div className="container">
        <h1>Unlimited movies, TV shows and more</h1>
        <h2>Watch anywhere. Cancel anytime.</h2>
        <p>
          Ready to watch? Enter your email to create or restart your membership.
        </p>

        {!email ? (
          <div className="input">
            <input type="email" placeholder="Email address" ref={emailRef} />
            <button className="register-btn" onClick={handleStart}>
              Get Started
            </button>
          </div>
        ) : (
          <form className="input">
            <input type="username" placeholder="Username" ref={usernameRef} />
            <input type="password" placeholder="Password" ref={passwordRef} />
            <button className="register-btn" onClick={handleFinish}>
              Start
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

export default Register;

Here are the network payload Payload

[Preview2

CodePudding user response：

You're trying to access state that hasn't update yet.

If you're using refs, you can remove the useState hooks and change your code to something like below.

const handleFinish = async (e) => {
e.preventDefault();
try {
  await axios.post("auth/register", { username: usernameRef.current.value , email: emailRef.current.value, password: passwordRef.current.value });
  navigate("/login");
} catch (err) {
  console.log(err);
}

Controlled components would be a better option for handling form elements imo. https://reactjs.org/docs/forms.html#controlled-components