Question

我正在处理一个反应中的userProfile容器组件，该组件在从服务器上出来后会显示一些数据。

这是组件：

import React from 'react';
import {connect} from 'react-redux';
import PersonalInformationView from './PersonalInformationView';
import * as selectors from '../../../reducers';

    class PersonalInformationViewContainer extends React.Component{
        constructor(props, context){
            super(props, context);

        }

        render(){
            return (
                    <PersonalInformationView userProfile={this.props.userProfile}/>
            );
        }

    }


    const mapStateToProps = (state, ownProps) => {
        return {
            user: selectors.getUser(state),
            userProfile: selectors.getUserProfile(state)
        };
    };

    const mapDispatchToProps = () =>{
        return {

        };
    };
    export default connect(mapStateToProps, mapDispatchToProps)(PersonalInformationViewContainer);

我遇到的问题是我需要重新调整调用传奇的动作FETCH_USER_PROFILE_STARTED并带来数据。这需要在调用选择器getUserProfile之前完成，因为我使用上面的代码得到了一个未定义的结果。

确保我已完成获取数据的最佳方法是什么，因此我的组件中的props.userProfile未定义？

Answer 1

您只需添加

即可

if (!this.props.userProfile)
  return null;

在渲染方法的开头，以便组件呈现为空。

或者在等待提取时呈现加载文本或动画而不是null。

或者通过将测试放在组件层次结构中更高的位置来渲染组件...

从技术上讲，你可以避免在提取开始之前调用getUserProfile选择器，但这会导致一个不必要的复杂，丑陋，不可维护和不可读的代码...为什么你会这样做？

你实际上想要来调用选择器而想要它返回undefined这是一个简单的事实......

在React Redux中mapStateToProps之前重复一个动作

1 个答案: