React Redux通过道具组件DidMount使用效果

Question

如何将componentDidMount((、componentWillReceiveProps(nextOps(更改为useEffect？我就是想不通。

下面这个是我在没有使用Hook的情况下的代码。从reducers获取this.props.auth。

componentDidMount() {
if (this.props.auth.isAuthenticated) {
this.props.history.push('/main');
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.auth.isAuthenticated) {
this.props.history.push('/main');
}
}

我想在这里做的是使用Hook useEffect。我不知道如何通过这个.props.auth.

import React, { useState,useEffect} from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
const LoginPage = () =>{
const navigate = useNavigate(); 
//componentDidMount()
useEffect(() => {
if (this.props.auth.isAuthenticated) {
navigate('/main');
}

}, [])
//componentWillReceiveProps(nextProps)
useEffect((nextProps) => {
if (this.props.auth.isAuthenticated) {
navigate('/main');
}

}, )
}

Answer 1

与上一个componentWillReceiveProps挂钩等效的react挂钩可以是useEffect挂钩，只需在依赖数组中指定要侦听更改的道具即可。

来自官方React文档：

您可以将useEffectHook看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。

如果希望每次auth属性更改时都调用useEffect，请在useEffect的依赖数组中指定它。

import React, { useState,useEffect} from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
const LoginPage = ({auth, ...rest}) =>{
const navigate = useNavigate(); 

useEffect(() => {
if (auth.isAuthenticated) {
navigate('/main');
}

}, [auth])
... 
}