為什么我的使用AWSAmplify的ReactAuthentication組件在使用ReactRouterV6保護路由時被無限渲染

我正在嘗試使用 React、AWS Amplify 和 React Router V6 創建自己的自定義身份驗證，我的目標是保護某些路由，以便未登錄的用戶無法訪問它們。

我的代碼在這里：

import './App.css';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Navbar from './components/Navbar/Navbar';
import Dashboard from './components/Dashboard/Dashboard';
import Reports from './components/Reports/Reports';
import Patients from './components/Patients/Patients';
import { BrowserRouter, Navigate, Outlet, Route, Routes, useLocation, } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import '@aws-amplify/ui-react/styles.css';
import Signup from './components/Signup/Signup';
import Signin from './components/Signin/Signin';
import { Auth } from 'aws-amplify';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  }
});

const useAuth = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await Auth.currentAuthenticatedUser();
      setUser(response);
    }
    fetchUser();
  })

  return { user };
}

function RequireAuth() {
  const auth = useAuth();
  const location = useLocation();
  console.log(auth);

  return (
    auth
      ? <Outlet/>
      : <Navigate to='/signin' state={{ from: location}} replace/>
  );
}

const App = () => {

  return (
    <ThemeProvider theme={darkTheme}>
      <BrowserRouter>
        <Routes>
          <Route element={<RequireAuth />}>
            <Route path="/" element={<Navbar />}>
              <Route path="dashboard" element={<Dashboard />} />
              <Route path="patients" element={<Patients />} />
              <Route path="reports" element={<Reports />} />
            </Route>
          </Route>
          <Route path="/signin" element={<Signin />} />
          <Route path="/signup" element={<Signup />} />
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

我花了一整天的時間嘗試無數的方法，但我一直得到相同的結果。我正在嘗試做的是保護 3 條路線儀表板、患者和報告。每當我點擊登錄按鈕時，我都會得到大約 500 個當前用戶的日志，如下所示：

有誰知道是什么觸發了這個組件無限地重新渲染（因此執行了我的 console.log(user) 函式），有什么解決方案可以解決這個問題嗎？

uj5u.com熱心網友回復：

看起來useEffect鉤子缺少依賴陣列，因此每個渲染周期都會觸發它的回呼。由于效果會更新狀態，因此會觸發重新渲染。

添加一個依賴陣列。

useEffect(() => {
  const fetchUser = async () => {
    const response = await Auth.currentAuthenticatedUser();
    setUser(response);
  }
  fetchUser();
}, []);

如果您需要在安裝路由時多次運行此效果，那么您可能需要添加一個依賴項，例如locationif/when 路由路徑更改。

例子：

const { pathname } = useLocation();

useEffect(() => {
  const fetchUser = async () => {
    const response = await Auth.currentAuthenticatedUser();
    setUser(response);
  }
  fetchUser();
}, [pathname]);

由于useEffect鉤子在初始渲染周期結束時運行，您可能還希望有條件地等待渲染出口或重定向，直到user填充狀態。

例子：

const useAuth = () => {
  const [user, setUser] = useState(); // <-- initially undefined

  useEffect(() => {
    const fetchUser = async () => {
      const response = await Auth.currentAuthenticatedUser();
      setUser(response);
    }
    fetchUser();
  }, []);

  return { user };
}

...

function RequireAuth() {
  const auth = useAuth();
  const location = useLocation();

  if (auth === undefined) {
    return null; // or loading indicator, etc...
  }

  return (
    auth
      ? <Outlet/>
      : <Navigate to='/signin' state={{ from: location }} replace/>
  );
}

標籤：反应 亚马逊网络服务 反应钩子 反应路由器 aws-放大

上一篇：如果我的用戶已經在okta上，Authn/Authz如何在AWS中作業

下一篇：使用單表設計查詢DynamoDB中的所有用戶