Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop - ProtectedRoutes Component

Question

我正在尝试创建一个 ProtectedRoutes 组件，但是，我似乎在某处创建了一个我似乎无法弄清楚的无限循环。我是初学者。

它应该检查是否存储了 cookie，如果有，则转到该组件。如果没有，它应该导航回主页。

ProtectedRoutes.js

import React, { Component, useState } from "react";
import { Route, Navigate } from "react-router-dom";
import Cookies from "universal-cookie";
const cookies = new Cookies();


export default function ProtectedRoutes({component: Component, ...rest}) {
    const [auth, setAuth] = useState(false);
    //get cookie from browser if logged in
    const token = cookies.get("TOKEN");
    if (token) {
        setAuth(true);
    };
    
    return auth ? <Component /> : <Navigate to="/" />
}

App.js

import { Container, Col, Row } from "react-bootstrap";
import "./App.css";
import Register from "./Register";
import Login from "./Login";
import { Routes, Route } from "react-router-dom";
import Account from "./Account";
import FreeComponent from "./FreeComponent";
import AuthComponent from "./AuthComponent";
import Private from "./ProtectedRoutes";
import ProtectedRoutes from "./ProtectedRoutes";

function App() {
  return (
    <Container>
      <Row>
        <Col className="text-center">
          <h1 className="header">React Authentication Tutorial</h1>

          <section id="navigation">
            <a href="/">Home</a>
            <a href="/free">Free Component</a>
            <a href="/auth">Auth Component</a>
          </section>
        </Col>
      </Row>
      
      {/* Routes */ }
      <Routes>
        <Route exact path="/" element={ <Account /> } />
        <Route exact path="/free" element={ <FreeComponent /> } />
        <Route path="/auth" element={<ProtectedRoutes component={AuthComponent} />} />
      </Routes>
    </Container>
  );
}

export default App;

AuthComponent.js

import React from 'react';

export default function AuthComponent() {
    return (
        <div>
            <h1 className="text-center">Auth Component</h1>
        </div>
    );
}

Answer 1

你的问题很严重。


export default function ProtectedRoutes({component: Component, ...rest}) {
    const [auth, setAuth] = useState(false);
    //get cookie from browser if logged in
    const token = cookies.get("TOKEN");
    if (token) {
        setAuth(true);
    };
    
    return auth ? <Component /> : <Navigate to="/" />
}

你需要把 setAuth 放在 useEffect


export default function ProtectedRoutes({component: Component, ...rest}) {
    const [auth, setAuth] = useState(false);
   React.useEffect(()=>{
const token = cookies.get("TOKEN");
    if (token) {
        setAuth(true);
    }
},[auth]);
    
    return auth ? <Component /> : <Navigate to="/" />
}

Answer 2

在 ProtectedRoutes 组件中，您直接在组件内部设置状态（在本例中为 setAuth），这就是您这样做时发生的情况：

每次检测到状态变化时都会响应 re-renders 一个组件，因此当您编写

export default function ProtectedRoutes({component: Component, ...rest}) {
    ...
    if (token) {
        setAuth(true);
    };
    ...
}

你是运行 setAuth（设置一个新状态 true）每次组件渲染（re-renders）然后，re-rendering组件每次都会因为状态变化而出现无限循环。，它是这样工作的：

它会在每次依赖项发生变化（作为数组传递）时运行，而当您传递一个空数组时它只运行两次 - 组件安装（第一次呈现）和卸载时。

你需要做的是传递一个空数组作为依赖项，如下所示

import { useEffect } from 'react'

export default function ProtectedRoutes({component: Component, ...rest}) {
    ...
    useEffect(() => {
        if (token) {
            setAuth(true);
        };
    }, [])   
    ...
}

这个setAuth只在组件挂载时执行一次

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop - ProtectedRoutes Component

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop - ProtectedRoutes Component

javascript

reactjs

react-router

react-router-dom

use-state