React Hook useEffect 缺少依赖项：props

Question

我目前正在构建松弛克隆。我想在组件安装时检查用户是否已经登录，首先，如果他将其主页推送到登录页面。我使用 react hooks 来检查而不是 componentDidMount，还使用 ​​redux 来存储使用 mapDispatchToProps 的用户的登录状态。

我收到警告

import React,{useEffect} from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Login from './components/Auth/login'
import Register from './components/Auth/register'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router,Switch,Route,useHistory,withRouter} from 'react-router-dom'
import 'semantic-ui-css/semantic.min.css'
import firebase from './firebase'
import { createStore } from 'redux'
import { Provider,connect} from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './reducers/index';
import * as actions from './actions/index';
import Spinner from './spinner'
const store=createStore(rootReducer,composeWithDevTools())

const Root=(props)=>{  
  const history=useHistory()
  useEffect(() => {
    console.log("1")
    firebase.auth().onAuthStateChanged(user=>{
      if(user){
        props.setUser(user);
        history.push('/home')
      }
      else{
        history.push('/login')
        props.clearUser();
      }
    })
  },[history.location.hash,history])
  return props.isLoading ? <Spinner/>:(
    <Switch>
      <Route exact path="/home" component={App} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
    </Switch>
)
}
const mapStateToProps=state=>{
  return {
  isLoading:state.user.isLoading,
  user:state.user.currentuser
}}
const mapDispatchToProps=dispatch=>{
  return{
    setUser:(user)=>dispatch(actions.SETuser(user)),
    clearUser:()=>dispatch(actions.CLEARuser())
  }
}

const RootwithAuth=withRouter(connect(mapStateToProps,mapDispatchToProps)(Root))
ReactDOM.render(
<Provider store={store}>
<Router>
    <RootwithAuth/>
</Router>
</Provider>,
  document.getElementById('root')
);
reportWebVitals();

Answer 1

您需要将props 作为依赖项传递。如果您有很多 props，这可能会导致性能影响。最好是 destructure 你的 props 并传入依赖数组。

你的情况是这样的：

const {setUser, clearUser} = props;

useEffect(() => {
    console.log("1")
    firebase.auth().onAuthStateChanged(user=>{
      if(user){
        setUser(user);
        history.push('/home')
      }
      else{
        history.push('/login')
        clearUser();
      }
    })
  },[history.location.hash,setUser,clearUser])

这就是警告想要表达的意思

Answer 2

这是 eslint-plugin-react-hooks 警告。 它告诉你钩子依赖于 useEffect 中的函数调用 您可以使用代码顶部的此注释 /* eslint-disable react-hooks/exhaustive-deps */ 告诉 ESLint 忽略对您的钩子的检查。