用 redux 将 componentDidUpdate(prevProps) 重写为 hook

Question

我想将此生命周期方法重写为一个钩子，但它没有按预期工作。当组件挂载时，如果本地存储中存在用户ID，则连接用户并在导航栏中显示他的姓名。当他断开连接并重新连接时，他的名字会显示在导航栏中。所以我试图用钩子转换这个类组件，当用户名发生变化时，导航栏中不会显示任何内容，所以我必须刷新页面，这样他的名字就会显示出来

真正的问题是 componentDidUpdate 我如何获取 prevProps 并将其与钩子进行比较

类组件

const mapStateToProps = state => ({

        ...state.authReducer

    }

);

const mapDispatchToProps = {

    userSetId,

    userProfilFetch,

    userLogout

};

class App extends React.Component {

    componentDidMount() {

        const userId = window.localStorage.getItem("userId");

        const {userSetId} = this.props;

        if (userId) {

            userSetId(userId)

        }

    }

    componentDidUpdate(prevProps, prevState, snapshot) {

        const {userId, userProfilFetch, userData} = this.props; //from redux store

        if(prevProps.userId !== userId && userId !== null && userData === null){

            userProfilFetch(userId);

        }

    }

    render() {

    return (

        <div>

          <Router>

              <Routes/>

          </Router>

        </div>

    );

  }

}

export default connect(mapStateToProps,mapDispatchToProps)(App);

带挂钩

const App = (props) => {

    const dispatch = useDispatch();

    const userData = useSelector(state => state.authReducer[props.userData]);

    const userId = window.localStorage.getItem("userId");

    useEffect(()=> {

        if(!userId){

            dispatch(userSetId(userId))

            dispatch(userProfilFetch(userId))

        }

    }, [userData, userId, dispatch])

    return(

        <Router>

            <Routes/>

        </Router>

    )

};

export default App;

Answer 1

基本上创建一个自定义挂钩来缓存一个值：const usePrevious = value => {&nbsp; const ref = useRef();&nbsp; useEffect(() => {&nbsp; &nbsp; ref.current = value;&nbsp; });&nbsp; return ref.current;}用法：const App = (props) => {&nbsp; const dispatch = useDispatch();&nbsp; const userData = useSelector(state => state.authReducer[props.userData]);&nbsp; const userId = window.localStorage.getItem("userId");&nbsp; // get previous id and cache current id&nbsp; const prevUserId = usePrevious(userId);&nbsp; useEffect(()=> {&nbsp; &nbsp; if(!userId){&nbsp; &nbsp; &nbsp; dispatch(userSetId(userId))&nbsp; &nbsp; &nbsp; dispatch(userProfileFetch(userId))&nbsp; &nbsp; }&nbsp; &nbsp; // do comparison with previous and current id value&nbsp; &nbsp; if (prevUserId !== userId) {&nbsp; &nbsp; &nbsp; dispatch(userProfileFetch(userId));&nbsp; &nbsp; }&nbsp; }, [userData, userId, prevUserId, dispatch])&nbsp; return(&nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; <Routes/>&nbsp; &nbsp; </Router>&nbsp; )};仅供参考：您可能需要稍微重构代码，以便在仅在挂载时运行的效果挂钩中从本地存储中获取数据。如果我正确理解了您的应用程序流程，它将如下所示：const App = (props) => {&nbsp; const dispatch = useDispatch();&nbsp; const { userId } = useSelector(state => state.authReducer[props.userData]);&nbsp; useEffect(() => {&nbsp; &nbsp; const userId = window.localStorage.getItem("userId");&nbsp; &nbsp; userId && dispatch(userSetId(userId));&nbsp; }, []);&nbsp; // get previous id and cache current id&nbsp; const prevUserId = usePrevious(userId);&nbsp; useEffect(()=> {&nbsp; &nbsp; if(!userId){&nbsp; &nbsp; &nbsp; dispatch(userSetId(userId))&nbsp; &nbsp; &nbsp; dispatch(userProfileFetch(userId))&nbsp; &nbsp; }&nbsp; &nbsp; // do comparison with previous and current id value&nbsp; &nbsp; if (prevUserId !== userId) {&nbsp; &nbsp; &nbsp; dispatch(userProfileFetch(userId));&nbsp; &nbsp; }&nbsp; }, [userId, prevUserId, dispatch])&nbsp; return(&nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; <Routes/>&nbsp; &nbsp; </Router>&nbsp; )};

Answer 2

现在我解决了，我做了这个const App = props => {&nbsp; &nbsp; const userId = window.localStorage.getItem("userId");&nbsp; &nbsp; const dispatch = useDispatch();&nbsp; &nbsp; const userData = useSelector(state=> state.authReducer[props.userData]);&nbsp; &nbsp; const isAuthenticated = useSelector(state=> state.authReducer.isAuthenticated);&nbsp; &nbsp; useEffect(()=> {&nbsp; &nbsp; &nbsp; &nbsp; if(userId){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dispatch(userSetId(userId))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dispatch(userProfilFetch(userId))&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, [userId])&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Routes/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Router>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )};