渲染不同组件时无法更新组件）

Question

我正在使用 React 18、React Router 6 和 React Auth Kit 2.7

我尝试做登录页面，如 RAK link

的示例所示

但是我收到这个错误

登录组件 JSX 代码

import React from "react"
import axios from "axios"
import { useIsAuthenticated, useSignIn } from "react-auth-kit"
import { useNavigate, Navigate } from "react-router-dom"

const SignInComponent = () => {
  const isAuthenticated = useIsAuthenticated()
  const signIn = useSignIn()
  const navigate = useNavigate()

  const [formData, setFormData] = React.useState({ login: "", password: "" })
  async function onSubmit(e) {
    e.preventDefault()
    axios.post("http://localhost:3030/api/auth/login", formData).then((res) => {
      if (res.status === 200) {
        if (
          signIn({
            token: res.data.token,
            expiresIn: res.data.expiresIn,
            tokenType: "Bearer",
            authState: res.data.authUserState,
          })
        ) {
          navigate("/profile")
          console.log("logged in")
        } else {
          //Throw error
        }
      } else {
        console.log("da duck you want")
      }
    })
  }
  console.log(isAuthenticated())
  if (isAuthenticated()) {
    // If authenticated user, then redirect to his profile
    return <Navigate to={"/profile"} replace />
  } else {
    return (
      <form onSubmit={onSubmit} className="flex flex-col w-96 p-2">
        <input
          className="text-black mt-2"
          type={"login"}
          onChange={(e) => setFormData({ ...formData, login: e.target.value })}
        />
        <input
          className="text-black mt-2"
          type={"password"}
          onChange={(e) =>
            setFormData({ ...formData, password: e.target.value })
          }
        />

        <button type="submit">Submit</button>
      </form>
    )
  }
}

export default SignInComponent

路由.jsx

// system
import React from 'react'
import { RequireAuth } from 'react-auth-kit'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

// pages
import DeveloperPage from "../pages/Dev.page";
import MainPage from "../pages/Main.page";
import ProfilePage from "../pages/profile/Profile.page";
import LoginPage from "../pages/Auth/Login.page.auth"
import RegisterPage from "../pages/Auth/Register.page.auth"

// components

// logic
const RoutesComponent = () => {
  return (
    <BrowserRouter>
      <Routes>

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

        {/* Authentication */}
        <Route path={"/login"} element={<LoginPage />} />
        <Route path={"/register"} element={<RegisterPage />} />

        {/* Developer */}
        <Route path={"/dev"} element={<DeveloperPage />} />

        {/* Other */}
        <Route path={"/profile"} element={
            <RequireAuth loginPath={"/login"}>
              <ProfilePage />
            </RequireAuth>
          } />

      </Routes>
    </BrowserRouter>
  );
};
export default RoutesComponent;

配置文件.jsx

import React, { useState } from 'react'

export default function App() {

  return (
    <div className="wrapper">
      <h1>Profile</h1>
    </div>
  );
}

我已经尝试在 stackoverflow、github issues 和错误提供的链接中搜索此错误，但仍然不明白如何修复我的示例中的错误

更新： 应用程序.jsx

import React from "react";
import { AuthProvider } from "react-auth-kit";
import RoutesComponent from "./routes/router";
import "./index.css";

function App() {
  return (
    <AuthProvider authName={"_auth"} authType={"localstorage"}>
      <RoutesComponent />
    </AuthProvider>
  );
}

export default App;

Answer 1

您已将申请放入

AuthProvider

了吗？ https://github.com/react-auth-kit/react-auth-kit/blob/master/examples/create-react-app/src/App.js

Answer 2

看起来与警告类似的问题：渲染不同的 Y 组件时无法更新组件 X 要在 Y 中找到错误的 setState() 调用，

在您自己的情况下， isAuthenticated() 函数调用是这里的罪魁祸首。要修复，您应该在 useEffect 中调用它并将该值保存在状态中。我建议为此创建一个自定义挂钩。钩子看起来像这样：

import { useEffect, useState } from 'react';
import { useIsAuthenticated } from "react-auth-kit"

const useSafeIsAuthenticated = () => {
    const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
    const _isAuthenticated = useIsAuthenticated();

    useEffect(() => {
        setIsAuthenticated(_isAuthenticated());
    }, [_isAuthenticated, isAuthenticated]);

    return { isAuthenticated, loading: isAuthenticated === null };
};

export default useSafeIsAuthenticated;