React登录后无法将LoginForm表单数据渲染到HomePage问题咨询

核心问题点 #

• App组件未定义存储登录用户账号、密码的状态，也未将登录信息持久化存储到localStorage
• 原有dataFormHandler仅返回用户名，没有将接收到的表单数据存储到公共状态，无法传递给HomePage组件
• 给HomePage传参时错误引用了dataFormHandler[0]，dataFormHandler是函数不是数组，无法读取到用户数据
• 页面刷新后未从localStorage读取已存储的用户信息，导致刷新后HomePage展示内容丢失

完整修改代码 #

App.jsx

import LoginForm from "./Component/LoginForm/LoginForm";
import HomePage from "./Component/HomePage/HomePage";
import { useState, useEffect } from "react";
function App() {
  const user = [{ username: "admin" }, { password: "admin" }];
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  // 新增存储当前登录用户账号密码的状态
  const [currentUser, setCurrentUser] = useState({
    username: '',
    password: ''
  });

  useEffect(() => {
    const isUserLoggedIn = localStorage.getItem("isLoggedInn");
    if (isUserLoggedIn === "1") {
      setIsLoggedIn(true);
      // 页面刷新时从localStorage读取用户信息
      const savedUsername = localStorage.getItem("username");
      const savedPassword = localStorage.getItem("password");
      setCurrentUser({
        username: savedUsername || '',
        password: savedPassword || ''
      })
    }
  }, []);

  const loginHandler = () => {
    localStorage.setItem("isLoggedInn", "1");
    setIsLoggedIn(true);
  };
  const logoutHandler = () => {
    localStorage.removeItem("isLoggedInn");
    // 登出时清除存储的用户信息
    localStorage.removeItem("username");
    localStorage.removeItem("password");
    setIsLoggedIn(false);
    setCurrentUser({username: '', password: ''});
  };
  const onSaveDataHandler = (newData) =>{
    console.log(newData);
    console.log('inside app');
  }
  // 调整dataFormHandler，存储接收到的账号密码到状态和localStorage
  const dataFormHandler = (username,password) => {
    setCurrentUser({username, password});
    localStorage.setItem("username", username);
    localStorage.setItem("password", password);
    return username;
  }

  return (
    <div>
      {!isLoggedIn && <LoginForm adminUser={user} onLogin={loginHandler} onSaveData={onSaveDataHandler} dataForm={dataFormHandler}/>}
      {/* 正确给HomePage传递账号密码参数 */}
      {isLoggedIn && <HomePage onLogout={logoutHandler} user={currentUser.username} pass={currentUser.password}/>}
    </div>
  );
}

export default App;

LoginForm.jsx（仅调整方法调用顺序保证状态更新时机正确，原有逻辑不变）

import styles from "./LoginForm.module.css";
import { useState } from "react";
import SignUp from "../SignUp/SignUp";
const LoginForm = (props) => {
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredPassword, setEnteredPassword] = useState("");
  const [isTrue, setTrue] = useState(true);
  const [isClicked, setIsClicked] = useState(false);

  const onChangeHandlerUsername = (event) => {
    setEnteredUsername(event.target.value);
    if (event.target.value === enteredUsername) {
      setTrue(true);
    }
  };
  const onChangeHandlerPassword = (event) => {
    setEnteredPassword(event.target.value);
    if (event.target.value === enteredPassword) {
      setTrue(true);
    }
  };
  const onSubmitHandler = (event) => {
    event.preventDefault();
    if (
      enteredUsername === props.adminUser[0].username &&
      enteredPassword === props.adminUser[1].password
    ) {
      // 调整顺序，先传递用户数据再更新登录状态，避免HomePage渲染时数据还没更新
      props.dataForm(enteredUsername,enteredPassword);
      props.onLogin();
    } else {
      setTrue(false);
    }
  };
  const onClickHandler = () => {
    setIsClicked(true);
  };
  const sendDataToChild = (entereduserData) =>{
    const userData = {
      ...entereduserData,
      id: Math.random().toString()
    };
    props.onSaveData(userData);
  }
  return (
    <>
      {isClicked &&
      enteredUsername !== props.adminUser[0].username &&
      enteredPassword !== props.adminUser[1].password ? (
        <SignUp name={enteredUsername} dataTransfer={sendDataToChild}/>
      ) : (
        <form onSubmit={onSubmitHandler}>
          <h1 className={styles.blink_me}>W E L C O M E</h1>
          <div className={`${styles.box} ${!isTrue && styles.wrong}`}>
            <h1>Login</h1>
            <input
              type="text"
              value={enteredUsername}
              placeholder="Enter Username"
              className={styles.email}
              onChange={onChangeHandlerUsername}
            ></input>
            <input
              type="password"
              value={enteredPassword}
              placeholder="Enter Password"
              className={styles.email}
              onChange={onChangeHandlerPassword}
            ></input>
            <div>
              <button className={styles.btn}>Sign In</button>
            </div>
            <div>
              <button
                onClick={onClickHandler}
                type="button"
                className={styles.btn2}
              >
                Sign Up
              </button>
            </div>
            <div>
              <a href="#top">Forget Password</a>
            </div>
          </div>
        </form>
      )}
    </>
  );
};
export default LoginForm;

HomePage.jsx（原有逻辑无需修改，可正常接收props展示内容）

import styler from './HomePage.module.css';

const HomePage = (props) =>{
    return(
        <div className={styler.body}>
        <h2>Login Successfull !</h2>
        <p>Name: {props.user}</p>
        <p>Password: {props.pass}</p>
        <button type='submit' onClick={props.onLogout} className={styler.button}>Logout</button>
        </div>
    );
}
export default HomePage;

注意：生产环境不建议将密码明文存储到localStorage，存在信息泄露风险，此处仅为实现需求做演示。

内容的提问来源于stack exchange，提问作者nitin bakaya