React条件渲染异常：点击「登录为管理员」跳转至注册页求助

核心问题 #

1. setState调用逻辑错误：点击“Login as an Admin”按钮的onClick事件中，用&&连接多个setState调用，但setState是异步函数且返回undefined，导致第一个setIsLogin(false)执行后，后续的setIsAdmin(true)和setIsSignUp(false)不会触发。此时isSignUp保持初始值true，渲染逻辑优先显示SignUpForm。
2. 渲染逻辑优先级问题：当前渲染逻辑中，isLogin为false时会先判断isSignUp，只有isSignUp为false才会检查isAdmin。由于setIsSignUp(false)未执行，isSignUp始终为true，自然会显示SignUpForm。

修复步骤 #

步骤1：修正按钮点击事件 #

将LoginForm中“Login as an Admin”的onClick事件改为包裹多个独立的setState调用，确保所有状态都能更新：

<p className='text-blue-400 mb-4 text-sm font-medium cursor-pointer' onClick={() => {
    setIsLogin(false);
    setIsAdmin(true);
    setIsSignUp(false);
}}>Login as an Admin</p>

步骤2：优化状态管理（可选但推荐） #

三个布尔状态易引发逻辑冲突，建议改用单个状态标记当前表单类型，简化逻辑：

// 替换原有的三个useState
const [currentForm, setCurrentForm] = useState('login'); // 可选值：'login'、'signup'、'admin'

修改渲染逻辑：

{currentForm === 'login' ? <LoginForm /> : 
 currentForm === 'signup' ? <SignUpForm /> : 
 currentForm === 'admin' ? <AdminLoginForm /> : null}

同步更新各按钮的点击事件：

• 注册按钮：onClick={() => setCurrentForm('signup')}
• 普通登录按钮：onClick={() => setCurrentForm('login')}
• 管理员登录按钮：onClick={() => setCurrentForm('admin')}

这种方式能彻底避免多状态间的逻辑冲突，代码更易维护。

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