React登录/注册成功后跳转Dashboard陷入无限循环求助

登录或注册成功后，页面跳转至Dashboard组件并陷入无限循环，注册场景下同样触发该问题。控制台抛出警告：

react-dom.development.js:86 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

故障根源 #

LoginForm组件的跳转判断逻辑完全错误：

if (setIsLoggedIn) {
  return <Dashboard />;
}

这里的setIsLoggedIn是父组件传递的状态更新函数，它永远不会为false，因此组件每次渲染都会直接返回Dashboard。而Dashboard被LoginForm渲染后，LoginForm会再次触发这个判断，形成无限渲染循环，最终触发深度超限警告。

正确逻辑应该是根据**登录状态值（isLoggedIn）**判断是否跳转，而非判断状态更新函数是否存在。

修复方案 #

1. 父组件需同时传递isLoggedIn状态给LoginForm（原代码只传了setIsLoggedIn）
2. 修改LoginForm的跳转判断条件，用isLoggedIn替代setIsLoggedIn
3. 修正Dashboard组件命名（首字母大写，符合React组件规范）

修改后的LoginForm组件 #

import React, { useState, useCallback } from 'react';
import axios from 'axios';
import Dashboard from './dashboard';

const Login = ({ setUser, setIsLoggedIn }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = useCallback(async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:3001/login', {
        email,
        password,
      });

      if (response.status === 200) {
        const user = response.data;
        setUser(user);
        setIsLoggedIn(true); // 登录成功后设置登录状态为true
      } else {
        console.log('认证失败');
      }
    } catch (error) {
      console.log('认证过程出错:', error);
    }
  }, [email, password, setUser, setIsLoggedIn]);

  return (
    <div>
      <h2>登录</h2>
      <form onSubmit={handleLogin}>
        <label>
          邮箱:
          <input
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <br />
        <label>
          密码:
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </label>
        <br />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

const Register = ({ setUser, setIsLoggedIn }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState('basic');

  const handleRegister = useCallback(async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('http://localhost:3001/signup', {
        email,
        password,
        role,
      });

      if (response.status === 200) {
        const user = response.data;
        setUser(user);
        setIsLoggedIn(true); // 注册成功后设置登录状态为true
      } else {
        console.log('注册失败');
      }
    } catch (error) {
      console.log('注册过程出错:', error);
    }
  }, [email, password, role, setUser, setIsLoggedIn]);

  return (
    <div>
      <h2>注册</h2>
      <form onSubmit={handleRegister}>
        <label>
          邮箱:
          <input
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </label>
        <br />
        <label>
          密码:
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </label>
        <br />
        <label>
          角色:
          <select value={role} onChange={(e) => setRole(e.target.value)}>
            <option value="basic">基础用户</option>
            <option value="admin">管理员</option>
            <option value="user">普通用户</option>
          </select>
        </label>
        <br />
        <button type="submit">注册</button>
      </form>
    </div>
  );
};

const LoginForm = ({ setUser, isLoggedIn, setIsLoggedIn }) => {
  const [isRegistering, setIsRegistering] = useState(false);

  const setUserCallback = useCallback(
    (user) => {
      setUser(user);
    },
    [setUser]
  );

  // 修正：根据登录状态判断是否跳转Dashboard
  if (isLoggedIn) {
    return <Dashboard />;
  }

  return (
    <div>
      {isRegistering ? (
        <Register setUser={setUserCallback} setIsLoggedIn={setIsLoggedIn} />
      ) : (
        <Login setUser={setUserCallback} setIsLoggedIn={setIsLoggedIn} />
      )}
      <p>
        {isRegistering ? '已有账号?' : '还没有账号?'}
        <button onClick={() => setIsRegistering(!isRegistering)}>
          {isRegistering ? '登录' : '注册'}
        </button>
      </p>
    </div>
  );
};

export default LoginForm;

修改后的Dashboard组件 #

import React from 'react';

// 组件名首字母大写，符合React规范
const Dashboard = () => {
  return <h1>你好，世界!</h1>;
};

export default Dashboard;

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