Reactjs React Redux，使用选择器使组件渲染两次

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

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

我遇到的问题是，如果用户未登录时，suer对用户区域进行了修改，我希望应用程序将其重定向到另一个“notloggedin”页面

我得到了以下信息，但是我遇到的问题是，当第一次呈现路由时，

userDetails

返回一个空对象，该对象随后触发

历史。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;

在

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;

//App.js
常量应用=（）=>{
const dispatch=usedpatch（）；
useffect（（）=>{
if（localStorage.getItem（“userToken”））{
调度（getUserData（localStorage.getItem（“userToken”））；
}
}, []);
返回(
...
);
};
导出默认应用程序；

---

谢谢

实现的问题是，在呈现组件后设置用户状态（使用

App.js

中的

useffect

设置用户状态）

用户状态为null的第一次渲染->useEffect调度从本地存储检索的用户数据->用户状态得到更新->另一次渲染，因为您正在侦听状态更改

---

如果您想使用本地存储设置用户数据，我建议您在初始化redux状态时这样做。

实现的问题是，在呈现组件后设置用户状态（您使用

App.js

中的

useffect

设置用户状态）

用户状态为null的第一次渲染->useEffect调度从本地存储检索的用户数据->用户状态得到更新->另一次渲染，因为您正在侦听状态更改

---

如果要使用本地存储设置用户数据，我建议在初始化redux状态时这样做。

如何填充

userData

用户数据？如何填充

userData

用户数据？

//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;