React.js登录后页面切换问题：无法渲染对应页面

问题核心 #

你的代码中最大的问题是：点击事件的回调函数handleLogin返回的JSX不会被React渲染。React组件的视图由return语句中的内容决定，事件处理函数仅负责执行逻辑，无法通过返回组件直接切换页面。此外还有两个辅助问题：输入框未绑定value属性导致受控组件状态异常，缺少跟踪登录状态和用户类型的状态变量。

解决方案步骤 #

• 添加isLoggedIn状态跟踪是否登录，currentUser状态存储当前登录用户信息
• 修改handleLogin逻辑，验证成功后更新状态而非返回组件
• 在组件渲染阶段根据状态判断，显示登录表单或对应用户页面
• 修复输入框的value绑定，确保输入状态与React状态同步

修改后的代码 #

App.js

import { useState } from 'react';

import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';

function App() {
  const [userEmail, setEmail] = useState('admin@gmail.com');
  const [userPassword, setPassword] = useState('password');
  // 新增登录状态与当前用户信息状态
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    // 使用find替代循环，更高效查找用户
    const foundUser = USER_DATA.find(user => user.userEmail === email);
    if (!foundUser) {
      console.log('Email not matched ..... ');
      return;
    }
    if (foundUser.password !== password) {
      console.log('Password not matched ..... ');
      return;
    }
    // 验证成功后更新状态，触发组件重新渲染
    setCurrentUser(foundUser);
    setIsLoggedIn(true);
  }

  // 根据登录状态渲染对应页面
  if (isLoggedIn) {
    return currentUser.isAdmin ? <AdminPage /> : <EmployeePage user={currentUser} />;
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <p className='P'>Welcome there!</p>
        <div
          id='input-div'
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '20px',
            alignContent: 'left',
          }}
        >
          <label>Email</label>
          <input
            type='email'
            id='email'
            onChange={handleEmail}
            value={userEmail} // 绑定value，实现受控组件
            required
          />
          <label>Password</label>
          <input
            type='password'
            id='password'
            onChange={handlePassword}
            value={userPassword} // 绑定value，实现受控组件
            required
          />
        </div>

        <div style={{ display: 'flex', margin: '10px' }}>
          <button
            className='Button'
            onClick={() => handleLogin(userEmail, userPassword)}
          >
            Login
          </button>
          <button className='Button'>Registration</button>
        </div>
      </header>
    </div>
  );
}

export default App;

补充说明 #

1. 使用Array.find替代循环，更简洁高效地匹配用户信息
2. 登录成功后通过状态更新触发组件重新渲染，实现页面切换
3. 输入框绑定value属性后，输入内容会与React状态实时同步，避免输入异常
4. 若需要支持员工账号，只需在userData.js中添加对应员工数据即可

内容的提问来源于stack exchange，提问作者Jay Bhajiyawala