React Redux，useSelector 导致组件渲染两次

Question

我正在尝试为反应应用程序创建一个用户区域，

如果用户已登录，则数据将存储在 redux 中的“userData”下，

我遇到的问题是，如果用户在未登录时对用户区域进行操作，我希望应用程序将他们重定向到另一个“notloggedin”页面，

我有以下内容，但是我遇到的问题是，当首次渲染路线时userDetails返回一个空对象，该对象随后会触发history.push('/notloggedin'). 我可以看到，如果我第一次删除history.push('/notloggedin')并加载组件，它会userDetails作为空对象加载，但随后会重新呈现为填充的对象。我真的很困惑如何仅在从 useSelector 填充对象后才使组件呈现。

import React, {useState, useEffect} from 'react';
import {useSelector, shallowEqual} from 'react-redux';

const index = () => {
    const userDetails = useSelector(state=>state.userData, shallowEqual);

useEffect(()=>{
    if(Object.keys(userDetails).length===0){
        history.push('/notloggedin')
    }
},[])
    return (
        <div>
            <h1>Member Area</h1>
            <p>Your User name us</p>
            {userDetails.username}
            ...
        </div>
    );
};

export default index;

如果我删除该行const userDetails = useSelector(state=>state.userData, shallowEqual);，那么该组件只会按照我的预期渲染一次，我不明白为什么上面的 live 会导致它渲染两次！

userData 使用以下操作填充

//login/actions.js

export const getUserData = (token) => {
    console.log('getuser data');
    return dispatch => {
        api.getUserData()
        .then(res =>
            dispatch({
                type: GET_USER_DETAILS,
                payload: res.data.user
            })
        );
    };
};

这被称为App.js

//App.js


const App = () => {
    

    const dispatch = useDispatch();

    useEffect(() => {
       
        if (localStorage.getItem("userToken")) {
            
    
    dispatch(getUserData(localStorage.getItem("userToken")));
        }
        
    }, []);

    return (
        <div className="app">
           ...
        </div>
    );
};

export default App;

谢谢！

Answer 1

您的实现的问题是，您在渲染组件后设置用户状态（您正在使用useEffectin设置用户状态App.js）。

首先以用户状态为 null 进行渲染 -> useEffect 分派从本地存储检索的用户数据 -> 用户状态得到更新 -> 由于您正在侦听状态更改，因此进行另一个渲染。

如果您想使用本地存储设置用户数据，我建议在初始化 redux 状态时执行此操作。