使用 Node + OAuth2 设置多次渲染 React 组件

Question

我有一个 React + Node 应用程序设置。节点服务器有一个名为“/auth/login”的 api，它调用外部授权服务器。授权后我成功重定向到我的客户端应用程序。但客户端应用程序不断渲染多次。

这是我的 React 组件。

应用程序组件：

import { Routes, Route, Navigate } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import BotApp from "./components/BotApp/BotApp";
import Login from "./components/Login";

function App() {
  console.log("App initialized");
  const [loggedIn, setLoggedIn] = useState(false);
    const getUser = async () => {
        try {
            const url = `http://localhost:5000/auth/login/success`;
            const { data } = await axios.get(url, { withCredentials: true });
      setLoggedIn(data.loggedIn);
        } catch (err) {
            console.log(err);
        }
    };

    useEffect(() => {
    console.log("App useEffect");
        getUser();
    }, []);

    return (
        <div className="container">
            <Routes>
                <Route
                    path="/"
                    element={loggedIn ? <BotApp /> : <Login/>}
                />
                <Route
                    path="/login"
                    element={loggedIn ? <Navigate to="/" /> : <Login />}
                />
            </Routes>
        </div>
    );
}

export default App;

登录组件

function Login() {
  console.log("Login initialized");
  const authenticate = () => {
    window.open(`http://localhost:5000/auth/login`, "_self");
  };
  authenticate();

  return <></>;
}

export default Login;

机器人应用程序组件（受保护）

import React from "react";
import useTheme, { ThemeProvider } from "../../contexts/ThemeProvider";
import { FaPowerOff, FaUserCircle } from "react-icons/fa";
import ChatBot from "../ChatBot/ChatBot";
import './BotApp.css'

const BotApp = () => {
  console.log("Bot App initialized");
  const data = useTheme();
  return (
    <ThemeProvider value={data}>
      <div className="App">
        <div className="header">
          <div className="left">
            <img src="/assets/aviator.svg"></img>
            <span>Bot</span>
          </div>
          <div className="right">
            <div className="user-menu">
              <i>
                <FaUserCircle></FaUserCircle>
              </i>
              <div className="drop-menu">
                <span className="menu-item">
                  <a href="/logout">
                    <FaPowerOff></FaPowerOff>
                    Logout
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <ChatBot></ChatBot>
        <div className="sidebar"></div>
      </div>
    </ThemeProvider>
  );
};

export default BotApp;

我尝试将身份验证函数调用移至登录组件中的 useEffect()，但它不起作用。

一切正常，直到我的应用程序加载并在该页面不断重新渲染之后。

无法弄清楚出了什么问题。感谢任何帮助。

Answer 1

如果您在开发服务器上执行此操作：这是预期的结果。 React 总是会渲染组件 2 次以确保数据一致性。就您而言，您的问题是您没有取消请求，以防组件卸载