setAuth 没有更新授权状态

Question

我之前的 post 与一个 post 相关联，该 post 没有回答我的问题并已关闭。

我正在尝试创建 ProtectedRoutes 组件，但是，我似乎无法更新身份验证状态。

它应该检查是否存储了 cookie，如果有，将 auth 设置为 true。然后，如果 auth 为真，则重定向到 auth 组件，否则重定向到 landing/login 页面。

授权页面总是重定向回登陆页面。状态永远不会更新为 true。找遍了，还是搞不懂state为什么不更新。

甚至可以用这种方式创建这个 ProtectedRoutes 组件吗？

ProtectedRoutes.js

import React, { Component, useState, useEffect } 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");

    useEffect(() => {
        if (token) {
            setAuth(true);
        }
    },[token]);
    
    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

是否有理由将 auth 作为 React 状态的一项？

如果一切都是从带有令牌的 cookie 驱动的，那么就没有必要也将它存储在状态然后有一个 useEffect 轮流收听。

我认为可能发生的情况是您的页面第一次呈现（即在您的 useEffect 具有运行之前）并立即开始 Navigate 路径，因为 auth仍然是 false（它的初始值）。您的 useEffect 会运行，但 太晚了 - 您的应用已经开始显示 Navigate 组件。

试试这个：

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

setAuth 没有更新授权状态

setAuth is not updating the auth state

javascript

reactjs

react-state