数组在函数外部显示为空

Question

我试图通过将登录用户详细信息与保存在

localStorage

中的注册用户详细信息进行匹配来验证用户的用户名和密码。但是，我发现当我将注册详细信息推入

console.log

users

数组时，它在

handleSignUpSubmit

函数之外显示为空。我不明白为什么会发生这种事。

import { useRef, useEffect } from "react";
import styles from "../../styles/Login/Login.module.css";

interface User {
  username: string;
  password: string;
}

const Login = (): JSX.Element => {
  const signUpRef = useRef<HTMLInputElement>(null);
  const signUpPasswordRef = useRef<HTMLInputElement>(null);
  const loginRef = useRef<HTMLInputElement>(null);
  const loginPasswordRef = useRef<HTMLInputElement>(null);

  const users: User[] = [];

  const handleSignUpSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const userDetails: User = {
      username: signUpRef.current!.value,
      password: signUpPasswordRef.current!.value,
    };

    users.push(userDetails);
    localStorage.setItem("user", JSON.stringify(users));

    signUpPasswordRef.current!.value = "";
    signUpRef.current!.value = "";
  };

  const handleLoginSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const loginUserDetails: User = {
      username: loginRef.current!.value,
      password: loginPasswordRef.current!.value,
    };

    console.log(users.includes(loginUserDetails));

    // const retreiveUsers = localStorage.getItem("user");
    // if (retreiveUsers) {
    //   if (users.includes(loginUserDetails)) {
    //     console.log("Welcome Back!");
    //   } else {
    //     console.log("Check your username or password again");
    //   }

    //   loginRef.current!.value = "";
    //   loginPasswordRef.current!.value = "";
    // } else {
    //   alert("No user found.");
    // }
  };

  return (
    <>
      <form onSubmit={handleSignUpSubmit}>
        <h1>Sign Up</h1>
        <div>
          <label htmlFor="signup-username">Username</label>
          <input
            type="text"
            name="signup-username"
            className={styles.username}
            ref={signUpRef}
            id="signup-username"
            autoComplete="nkhan018"
          />
        </div>
        <div>
          <label htmlFor="signup-password">Password</label>
          <input
            type="password"
            name="signup-password"
            className={styles.password}
            ref={signUpPasswordRef}
            id="signup-password"
            autoComplete="123"
          />
        </div>
        <button type="submit">Sign Up</button>
      </form>

      <form onSubmit={handleLoginSubmit}>
        <h1>Login</h1>
        <div>
          <label htmlFor="login-username">Username</label>
          <input
            type="text"
            name="login-username"
            className={styles.username}
            id="login-username"
            ref={loginRef}
            autoComplete="nkhan018"
          />
        </div>
        <div>
          <label htmlFor="login-password">Password</label>
          <input
            type="password"
            name="login-password"
            className={styles.password}
            id="login-password"
            ref={loginPasswordRef}
            autoComplete="123"
          />
        </div>
        <button type="submit">Log In</button>
      </form>
    </>
  );
};

export default Login;

Answer 1

1. 可以使用useState进行用户管理

const [users, setUsers] = useState<User[]>(() => {
  const storedUsers = localStorage.getItem("user");
  return storedUsers ? JSON.parse(storedUsers) : [];
});

2. 在handleSignUpSubmit函数中，使用新的用户数据更新用户状态并将其存储在localStorage中。

const handleSignUpSubmit = (e: React.FormEvent) => {
  e.preventDefault();

  const userDetails: User = {
    username: signUpRef.current!.value,
    password: signUpPasswordRef.current!.value,
  };

  // Update the users state with the new user
  setUsers((prevUsers) => [...prevUsers, userDetails]);

  // Store the updated user data in localStorage
  localStorage.setItem("user", JSON.stringify(users));

  // Clear input fields
  signUpPasswordRef.current!.value = "";
  signUpRef.current!.value = "";
};

3. 在handleLoginSubmit函数中，使用用户状态来检查用户数据中是否存在登录用户详细信息。

const handleLoginSubmit = (e: React.FormEvent) => {
  e.preventDefault();

  const loginUserDetails: User = {
    username: loginRef.current!.value,
    password: loginPasswordRef.current!.value,
  };

  // Check if the loginUserDetails exists in the users state
  const userExists = users.some(
    (user) =>
      user.username === loginUserDetails.username &&
      user.password === loginUserDetails.password
  );

  console.log(userExists);

  // Handle the login logic based on userExists
  if (userExists) {
    console.log("Welcome Back!");
  } else {
    console.log("Check your username or password again");
  }

  // Clear input fields
  loginRef.current!.value = "";
  loginPasswordRef.current!.value = "";
};

4. 最后你可以创建一个clearInputsReferences方法来抽象逻辑：

const clearInputsReferences = (inputs) => {
  inputs?.forEach((input) => input.current!.value = "")
};

...

const handleLoginSubmit = (e: React.FormEvent) => {
  ...
  clearInputsReferences([loginRef, loginPasswordRef]);
}