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

Question

我正在尝试为 React 应用创建一个用户区，

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

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

我有以下内容，但是我遇到的问题是，当第一次呈现路由时， 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

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

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

首先在用户状态为 null 的情况下进行渲染 -> useEffect 调度从本地存储检索到的用户数据 -> 用户状态得到更新 -> 另一个渲染，因为您正在侦听状态更改。

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