ReactRouter(Version6.0.2)使頁面無回應ReactJS-有解無憂

當我navigate在 ReactJS React Router DOM 中使用新函式時，它會使頁面無回應。我認為我的代碼中有一個錯誤，因為當我將navigatereact-router-dom 函式添加到一個按鈕時，就像() => navigate('home')它作業一樣。但是，當我添加它時useEffect 它不起作用，頁面變得沒有回應。

如果有任何錯誤，請檢查我的代碼，因為我對此知之甚少。

import React, { useEffect, useState } from 'react';

import './App.css';

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Navigate,
  useNavigate
} from "react-router-dom";
import Home from './Pages/Home';
import Login from './Pages/Login';

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged
} from "firebase/auth";

import {auth} from './Config';


function App() {

  const [authenticated, setAuthenticated] = useState(false);

  const navigate = useNavigate();

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setAuthenticated(true);
        navigate('home') // doesn't work
      } else {
        setAuthenticated(false);
      }
    })
  })

  const signup = (email, pass) => {
    createUserWithEmailAndPassword(auth, email, pass)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user)
        navigate('home')
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorMessage)
      });
  }

  const login = (email, pass) => {
    signInWithEmailAndPassword(auth, email, pass)
      .then((credentials) => {
        console.log(credentials.user);
      })
      .catch((error) => {
        console.log(error.message);
      })
  }

  return (
    <Routes>
      <Route path='/' element={<button className="primary-button" onClick={() => navigate('home')}>Home</button>} /> // this works
      <Route path="/home" element={<Home authenticated={authenticated} />}></Route>
      <Route path="/auth" element={<Login signup={signup} login={login} />}></Route>
    </Routes>
  );
}

function AppWrapper() {
  return (
    <Router>
      <App />
    </Router>
  )
}

export default AppWrapper;

uj5u.com熱心網友回復：

我的猜測將來自您渲染回圈的代碼，因為useEffect鉤子缺少依賴項陣列。每次App渲染看起來都像是重新創建了 auth 偵聽器并可能觸發重新渲染。

將依賴陣列添加到，useEffect因此它只在組件掛載時呼叫一次，并在效果清理函式中回傳取消訂閱函式。

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      setAuthenticated(true);
      navigate('home');
    } else {
      setAuthenticated(false);
    }
  });

  return unsubscribe;
}, []); // <-- empty dependency == call once on mounting

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369615.html

標籤：javascript 反应反应路由器-dom

上一篇：如何使用React以html格式顯示從WordpressRestAPI獲取的資料？

下一篇：React/Typescript：將obj推入物件陣列和未定義型別