我正在尝试使用python-flask和React TypeScript为我的小组项目提供用户身份验证。我实现了React-Auth-Kit库，到目前为止，它几乎没有问题。我现在遇到的问题是，当令牌过期时，它会将我注销（我想这样做），但在控制台中，我得到了一些错误：

Warning: Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`). To locate the bad setState() call inside `RequireAuth`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
   at RequireAuth (http://localhost:5173/node_modules/.vite/deps/react-auth-kit.js?v=0d6edd0e:495:21)
   at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3115:5)
   at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3483:5)
   at App (http://localhost:5173/src/App.tsx?t=1684444620489:38:7)
   at QueryClientProvider (http://localhost:5173/node_modules/.vite/deps/chunk-YI5FNOBD.js?v=44faa96f:2793:3)
   at Router (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3430:15)
   at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3851:5)
   at AuthProvider (http://localhost:5173/node_modules/.vite/deps/react-auth-kit.js?v=0d6edd0e:445:21)

react_devtools_backend_compact.js:2367 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.
    at RequireAuth (http://localhost:5173/node_modules/.vite/deps/react-auth-kit.js?v=0d6edd0e:495:21)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3115:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3483:5)
    at App (http://localhost:5173/src/App.tsx?t=1684444620489:38:7)
    at QueryClientProvider (http://localhost:5173/node_modules/.vite/deps/chunk-YI5FNOBD.js?v=44faa96f:2793:3)
    at Router (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3430:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-NCNQZCST.js?v=44faa96f:3851:5)
    at AuthProvider (http://localhost:5173/node_modules/.vite/deps/react-auth-kit.js?v=0d6edd0e:445:21)

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27292:11)
    at scheduleUpdateOnFiber (react-dom.development.js:25475:3)
    at dispatchReducerAction (react-dom.development.js:17452:7)
    at RequireAuth (PrivateRoute.tsx:58:15)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

main.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import Favicon from "react-favicon";
import favIcon from "./assets/Efavicon.ico";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

import { AuthProvider } from "react-auth-kit";
import { BrowserRouter } from "react-router-dom";

const queryClient = new QueryClient({});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AuthProvider
      authType={"cookie"}
      authName={"_auth"}
      cookieDomain={window.location.hostname}
      cookieSecure={false}
    >
      <BrowserRouter>
        <QueryClientProvider client={queryClient}>
          <Favicon url={favIcon} />
          <App />
          <ReactQueryDevtools />
        </QueryClientProvider>
      </BrowserRouter>
    </AuthProvider>
  </React.StrictMode>
);

App.tsx:

import { Route, Routes, BrowserRouter } from "react-router-dom";

import Login from "./Pages/login";
import Footer from "./Components/Footer/Footer";
import CreateAccount from "./Pages/CreateAccount";
import ForgotPassword from "./Pages/ForgotPassword";
import RecMain from "./Pages/RecMain";
import Watchlist from "./Pages/Watchlist";
import Title from "./Components/Title/Title";
import Testing from "./Components/Testing/Testing";
import SearchPage from "./Pages/SearchPage";
import useToken from "./Services/useToken";
import Navbar from "./Components/Navbar/Navbar";
import { RequireAuth } from "react-auth-kit";

function App() {
  const { token, removeToken, setToken, setUserID, userID } = useToken(); //old code to be removed
  return (
    <>
      <Navbar token={token} setToken={setToken} userId={userID} />
      <Routes>
        <Route path="/create-account" element={<CreateAccount />} />
        <Route path="/forgot-password" element={<ForgotPassword />} />

        {/* main page */}
        <Route path="/" element={<Login />} />

        <Route
          path="/main"
          element={
            <RequireAuth loginPath="/">
              <RecMain />
            </RequireAuth>
          }
        ></Route>
        <Route
          path="/watchlist"
          element={
            <RequireAuth loginPath="/">
              <Watchlist />
            </RequireAuth>
          }
        ></Route>
        <Route
          path="/title/:id"
          element={
            <RequireAuth loginPath="/">
              <Title />
            </RequireAuth>
          }
        ></Route>
        <Route
          path="/searching"
          element={
            <RequireAuth loginPath="/">
              <SearchPage />
            </RequireAuth>
          }
        ></Route>
        <Route
          path="/testing"
          element={
            <RequireAuth loginPath="/">
              <Testing />
            </RequireAuth>
          }
        ></Route>
      </Routes>
      <Footer />
    </>
  );
}

export default App;

login.tsx:

import axios from "axios";
import LoginForm from "../Components/Forms/LoginForm";
import styles from "../Components/Forms/formBox.module.css";
import { useNavigate } from "react-router-dom";
import { useSignIn } from "react-auth-kit";

interface LoginProps {
  setToken: (token: string) => void;
  setUserID: (userID: string) => void;
}

function Login() {
  const navigate = useNavigate();
  const signIn = useSignIn();

  return (
    <div className={styles.login}>
      <LoginForm
        onSubmit={(user) =>
          axios
            .post("http://localhost:5000/token", {
              email: user.email,
              password: user.password,
            })
            .then((response) => {
              signIn({
                token: response.data.access_token,
                expiresIn: 5, //time for token expiration
                tokenType: "Bearer",
                authState: { userId: response.data.user_id },
              });
              navigate("/main");
            })
            .catch((error) => {
              if (error.response) {
                console.log(error.response);
                console.log(error.response.status);
                console.log(error.response.headers);
              }
            })
        }
      ></LoginForm>
    </div>
  );
}

export default Login;

我是React的新手，所以我不确定这是与后端还是前端有关？（后端显示没有错误）请让我知道，如果任何其他信息会有所帮助。谢谢！