useEffect 仅适用于第一次更新/渲染

Question

我目前面临一个问题，其中 useEffect 仅适用于第一次渲染，导致我的注销按钮不起作用，或者我在重定向时做错了什么，因此组件永远不会到达仪表板，导致它无法运行使用效果？

以下是我目前的工作。

App.js

import React from 'react'
import './App.css'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import UserProvider from "./providers/UserProvider"
import SignIn from "./SignIn";
import Dashboard from './Dashboard'
import PrivateRoute from './components/PrivateRoute'

function App() {

  return (
    <UserProvider>
      <Router>
        <div className="App">
          <Switch>
            <PrivateRoute path="/Dashboard" component={Dashboard}/>
            <Route path="/" component={SignIn}/>
          </Switch> 
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;

仪表板.js

import React, { useEffect, useContext, useState } from "react"
import { UserContext } from "./providers/UserProvider"
import { Redirect } from "react-router-dom"
import {logOut} from './config/firebase'

export default function Dashboard() {
    const user = useContext(UserContext);
    const [redirect, setredirect] = useState(null);
  
    useEffect(() => {
      console.log(user)
      if (!user) {
        setredirect("/"); 
      }
    }, [user]);
  
    return (!redirect) ? (
      <div>
        <h1>Welcome Home</h1>
        <button onClick={logOut}>
          <img
            src="https://img.icons8.com/ios-filled/50/000000/google-logo.png"
            alt="google icon"
          />
          <span> logout</span>
        </button>
      </div>
    ):
    (<Redirect to={redirect} />);
  }

firebase 注销

export const logOut = () => {
  auth.signOut().then(()=> {
    console.log('logged out') // <-- sign out has no issue
  }).catch((error) => {
    console.log(error.message)
  })
}

发现：用户上下文已正确更新，据我观察，useEffect 仅适用于初始渲染，但在单击注销按钮时无效（console.log 将触发，但 useEffect 不会）

如果有人能指出我正确的方向，不胜感激。谢谢。

Answer 1

您可以拥有一个user 状态变量（用于存储用户身份验证令牌）并将其作为useEffect 中的第二个参数提及。

通常useEffect 在每次渲染后运行，但它也非常适合运行一些代码以响应状态更改。您可以通过将第二个参数传递给 useEffect 来指定效果何时运行。

将第二个参数视为“依赖项”数组——如果更改，效果应该重新运行的变量。这些可以是任何类型的变量：props、state 或其他任何东西。

useEffect(() => {
  console.log("user state changed", user);
}, [user]);