React项目Register组件触发BrowserRouter更新警告的排查求助

我正在开发一个全栈React应用，前端设有用户注册表单，使用React Query将表单数据提交至/api/users/register接口，提交成功后将用户跳转至首页(/)。功能运行正常，但控制台出现上述警告，不清楚触发原因，寻求帮助。相关代码如下：

代码示例 #

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <Router>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </Router>
);

App.js #

import React from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./components/Home";
import Register from "./components/Register";
import Login from "./components/Login";

const App = () => {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </>
  );
};

export default App;

Register.js #

import React from "react";
import { useNavigate } from "react-router-dom";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useFormik } from "formik";
import * as Yup from "yup";

const Register = () => {
  const navigate = useNavigate();
  const mutation = useMutation((registerFormData) => {
    return axios.post("/api/users/register", registerFormData);
  });
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      password: "",
    },
    validationSchema: Yup.object({
      name: Yup.string()
        .max(20, "Must be 20 characters or less")
        .required("Name is required."),
      email: Yup.string()
        .email("Invalid email address")
        .required("Email is required."),
      password: Yup.string()
        .min(5, "Must be 5 characters or more")
        .required("Password is required."),
    }),
    onSubmit: (values) => {
      mutation.mutate(values);
    },
  });

  mutation.isSuccess && navigate("/");

  return (
    <div className="register-form-container">
      <div>
        <h1>Register</h1>
      </div>
      <form onSubmit={formik.handleSubmit}>
        <div>
          <label htmlFor="name">Name</label>
          <input
            id="name"
            name="name"
            type="text"
            {...formik.getFieldProps("name")}
          />
          {formik.touched.name && formik.errors.name ? (
            <span>{formik.errors.name}</span>
          ) : null}
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            id="email"
            name="email"
            type="email"
            {...formik.getFieldProps("email")}
          />
          {formik.touched.email && formik.errors.email ? (
            <span>{formik.errors.email}</span>
          ) : null}
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
            {...formik.getFieldProps("password")}
          />
          {formik.touched.password && formik.errors.password ? (
            <span>{formik.errors.password}</span>
          ) : null}
        </div>
        <div>
          <button type="submit">Register</button>
        </div>
      </form>
    </div>
  );
};
export default Register;

警告原因 #

你在Register组件的渲染阶段直接执行了navigate("/")（通过mutation.isSuccess && navigate("/")），而navigate会触发BrowserRouter的状态更新。此时Register组件还在渲染过程中，React不允许在一个组件渲染时更新另一个组件的状态，因此抛出这个警告。

解决方案 #

有两种可靠的方法解决这个问题：

方法1：使用React Query的onSuccess回调 #

直接在useMutation配置中指定onSuccess函数，在请求成功后执行跳转，这是React Query推荐的异步操作处理方式：

const mutation = useMutation(
  (registerFormData) => {
    return axios.post("/api/users/register", registerFormData);
  },
  {
    onSuccess: () => {
      navigate("/");
    },
  }
);

同时删除原代码中的mutation.isSuccess && navigate("/")这一行。

方法2：用useEffect监听mutation.isSuccess #

通过useEffect在组件渲染完成后，再根据isSuccess状态执行跳转：

import { useEffect } from "react";

// ...其他代码

useEffect(() => {
  if (mutation.isSuccess) {
    navigate("/");
  }
}, [mutation.isSuccess, navigate]);

同样需要删除原代码中的mutation.isSuccess && navigate("/")。

这两种方法都能确保跳转操作在组件渲染周期之外执行，避免触发React的状态更新警告。

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