React登录组件渲染时更新BrowserRouter的警告问题求助

问题描述 #

登录操作后触发如下警告：

Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Login`). To locate the bad setState() call inside `Login`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
at Login (http://localhost:3000/static/js/bundle.js:3571:82)
at div
at LoginPage
at Routes (http://localhost:3000/static/js/bundle.js:129199:5)
at Router (http://localhost:3000/static/js/bundle.js:129132:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:127941:5)

后端未配置access token，警告仅在登录成功后出现，怀疑与useNavigate相关。

原因分析 #

问题根源在于Login组件的渲染逻辑：当success状态为true时，直接在JSX中调用Navigate('/authlog')。useNavigate返回的跳转函数本质是修改BrowserRouter的内部状态，而在组件渲染阶段执行父组件状态更新操作，会触发React的状态更新检测警告。

解决方案 #

提供两种可行修复方式：

方式1：登录成功后直接跳转 #

在handleLogin函数中，登录请求成功后直接调用跳转函数，无需通过success状态间接触发，逻辑更简洁。

方式2：用useEffect监听状态变化 #

保留success状态，通过useEffect钩子监听其变化，在状态更新后执行跳转，避免在渲染阶段触发路由操作。

推荐使用方式1，减少不必要的状态管理，简化组件逻辑。

修改后的Login组件代码 #

import React from 'react';
import { useRef, useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';

import axios from './api/axios';
const LOGIN_URL = '/login';
const REG_URL = '/newUser'

export default function Login() {
  const [authMode, setAuthMode] = useState("signin");
  const changeAuthMode = () => {
    setAuthMode(authMode === "signin" ? "signup" : "signin");
  }

  const userRef = useRef();
  const errRef = useRef();

  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [errMsg, setErrMsg] = useState('');
  const [register, setRegister] = useState(false);

  const navigate = useNavigate();

  useEffect(() => {
    userRef.current.focus();
  }, [])

  useEffect(() => {
    setErrMsg('');
  }, [userName, password])

  const handleRegister = (e) => {
    e.preventDefault();
    const RegConfiguration = {
      method: "post",
      url: REG_URL,
      data: { userName, password },
    };
    axios(RegConfiguration)
      .then((result) => {
        setRegister(true);
      })
      .catch((error) => {
        console.error('注册失败:', error);
      });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await axios.post(LOGIN_URL,
        JSON.stringify({ userName, password }),
        {
          headers: { 'Content-type': 'application/json' },
          withCredentials: false,
        }
      );
      setUserName('');
      setPassword('');
      navigate('/authlog'); // 登录成功直接跳转
    } catch (err) {
      if (!err?.response) {
        setErrMsg('No Server Response');
      } else if (err.response?.status === 400) {
        setErrMsg('Missing Username or Password');
      } else if (err.response?.status === 401) {
        setErrMsg('Unauthorized');
      } else {
        setErrMsg('Login Failed');
      }
      errRef.current.focus();
    }
  }

  if (authMode === "signin") {
    return (
      <div className="Auth-form-container">
        <form className="Auth-form" >
          <div className="Auth-form-content">
            <h3 className="Auth-form-title">Sign In</h3>
            <div className="text-center">
              Not registered yet?{" "}
              <span className="link-primary" onClick={changeAuthMode}>
                Sign Up
              </span>
            </div>
            <div className="form-group mt-3">
              <label>Username </label>
              <input
                className="form-control mt-1"
                id='userName'
                ref={userRef}
                name="userName"
                value={userName}
                placeholder="username"
                onChange={(e) => setUserName(e.target.value)}
              />
            </div>
            <div className="form-group mt-3">
              <label>Password</label>
              <input
                className="form-control mt-1"
                name="password"
                type="password"
                id='password'
                value={password}
                placeholder="password"
                required
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="d-grid gap-2 mt-3">
              <button
                type="submit"
                className="btn btn-primary"
                onClick={handleLogin}
              >
                Logga in
              </button>
              <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
            </div>
          </div>
        </form>
      </div>
    )
  }

  return (
    <div className="Auth-form-container">
      <form className="Auth-form" onSubmit={handleRegister}>
        <div className="Auth-form-content">
          <h3 className="Auth-form-title">Sign Up</h3>
          <div className="text-center">
            Already registered?{" "}
            <span className="link-primary" onClick={changeAuthMode}>
              Go to Sign In
            </span>
          </div>
          <div className="form-group mt-3">
            <label>Register Your Username here</label>
            <input
              className="form-control mt-1"
              name="userName"
              value={userName}
              placeholder="your username here:"
              onChange={(event) => setUserName(event.target.value)}
            />
          </div>
          <div className="form-group mt-3">
            <label>Register Your password</label>
            <input
              className="form-control mt-1"
              type="password"
              name="password"
              value={password}
              placeholder="your password here"
              onChange={(event) => setPassword(event.target.value)}
            />
          </div>
          <div className="d-grid gap-2 mt-3">
            <button type="submit" className="btn btn-primary">
              Register
            </button>
            {register ? (
              <p className="text-success">You Are Now Registered Successfully</p>
            ) : (
              <p className="text-danger">Please register your account here</p>
            )}
          </div>
        </div>
      </form>
    </div>
  );
}

额外优化点 #

• 移除不必要的success状态，简化组件逻辑
• 修正注册表单标题为"Sign Up"，符合语义
• 替换注册失败时的空错误处理，添加console.error便于调试
• 规范useNavigate变量命名为navigate（原代码错误命名为Navigate）

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