Redux 如何在React中渲染对象的属性？

我应该在何处处理此组件未按所需的

状态加载的问题

我的渲染方法导致以下错误

Uncaught TypeError: Cannot read property 'email' of undefined

…即使
JSON.stringify
行显示email属性确实（最终）存在

mapstatetops
中的
console.log
向下确认首先加载的状态没有任何
user
属性（从而导致错误）

请看，我天真地试图在构造函数方法中解决这个问题。它不起作用了

处理这种情况的正确方法是什么？渲染方法中的一些条件？我也试过了，但还是不走运

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';

class Feature extends Component {

    constructor(props){
        super(props);
        this.state = {
            'auth': {
                'user':{
                    email:'',
                    id:''
                }
            }
        }
    }

    componentWillMount() {
        this.props.fetchMessage();        // puts the user object into state
    }

    render() {
        return (
            <div className="feature">
                Here is your feature
                {JSON.stringify(this.props.user , null, 2)}
                {this.props.user.email}
            </div>
        );
    }

}

function mapStateToProps(state) {
    console.log('state',state);
    return { user: state.auth.user }
}

export default connect(mapStateToProps, actions)(Feature);

/////////////////减速器/////////////

export function fetchMessage(){

    return function(dispatch){
        axios
            .get(ROOT_URL, {
                headers: {
                    authorization: localStorage.getItem('token')
                }
            })
            .then((response) => {
                dispatch({
                    type: FETCH_MESSAGE,
                    payload: response.data.user
                })
            })
    }

}

var authReducer = (state={}, action) => {
    console.log('action.payload',action.payload);

    switch(action.type){
        case AUTH_USER: return      {...state, error: '', authenticated: true};
        case UNAUTH_USER: return    {...state, error: '', authenticated: false};
        case AUTH_ERROR: return     {...state, error: action.payload};
        case FETCH_MESSAGE: return  {...state, user: {
                                                        email: action.payload.email,
                                                        id: action.payload._id
                                                    }};
        default: return state;
    };
};

Redux使用一个名为
store
的全局状态，它位于组件外部

在
构造函数中
有一个
this.state={…}
语句。这是一种仅对
功能部件可用的本地状态

connect
from
react redux
基本上将
store
中的信息连接到组件
props
，因此称为
MapStateTrops

将您的
MapStateTrops
编辑为类似

function mapStateToProps(state) {
   const { auth: { user = {} } = {}} = state;
   return {
      user
   }
}

它所做的是尝试从存储中提取
user
属性，如果它还不存在，则将其设置为空对象。您的错误是由于您的mapStateToProps访问了尚不存在的用户属性。您可能希望将默认值设置为initialState以避免此问题。
Redux使用一个名为
存储的全局状态，该状态位于组件外部

在
构造函数中
有一个
this.state={…}
语句。这是一种仅对
功能部件可用的本地状态

connect
from
react redux
基本上将
store
中的信息连接到组件
props
，因此称为
MapStateTrops

将您的
MapStateTrops
编辑为类似

function mapStateToProps(state) {
   const { auth: { user = {} } = {}} = state;
   return {
      user
   }
}

它所做的是尝试从存储中提取
user
属性，如果它还不存在，则将其设置为空对象。您的错误是由于您的mapStateToProps访问了尚不存在的用户属性。您可能希望将默认值设置为initialState以避免此问题。
下面是发生的情况。。您正在向服务器请求
用户
对象，成功后，收到的对象将存储在您的redux存储中。执行此操作时，组件呈现如下：

您已向服务器发起请求，这意味着当前您的存储中没有
用户
，因此组件将使用
this.props.user
未定义
呈现


您的请求成功，并且
用户
对象存储在您的存储中。发生这种情况时，
react redux
将使用用户对象重新渲染组件，并且
此.props.user
在组件中可用

由于
this.props.user
不可用，在第一步中，您在访问
this.props.user.email
时遇到错误。尽管@jpdelatorre的答案很好，但您可以做的另一件事是在渲染方法中添加一个检查

 render() {
     let user = this.props.user || {};
     ....
         {user.email}
     ....
 }


下面是正在发生的事情。。您正在向服务器请求
用户
对象，成功后，收到的对象将存储在您的redux存储中。执行此操作时，组件呈现如下：

您已向服务器发起请求，这意味着当前您的存储中没有
用户
，因此组件将使用
this.props.user
未定义
呈现


您的请求成功，并且
用户
对象存储在您的存储中。发生这种情况时，
react redux
将使用用户对象重新渲染组件，并且
此.props.user
在组件中可用

由于
this.props.user
不可用，在第一步中，您在访问
this.props.user.email
时遇到错误。尽管@jpdelatorre的答案很好，但您可以做的另一件事是在渲染方法中添加一个检查

 render() {
     let user = this.props.user || {};
     ....
         {user.email}
     ....
 }


如果您可以添加您的操作和简化程序code.done，那么将更容易为您提供帮助，但是我的JSON.stringify行告诉我状态正在正确更新。正是组件加载和状态更新之间的那一秒让我产生了这个问题。如果您可以添加操作和还原程序code.done，那么帮助您会更容易。但是我的JSON.stringify行告诉我状态更新正确。正是组件加载和状态更新之间的那一秒让我产生了问题OK-你的代码工作了，但这是一种剧烈的破坏，需要几分钟的时间才能让我清醒过来！你的最后一句话，设置初始状态，似乎更简单。在哪个阶段我会这样做？回到我使用createStoreWithMiddleware的地方？是的，您在创建存储中设置了初始状态。而不是在我的authReducer的第一行中？酷。如果答案是正确的，请标记您的问题。好的-您的代码工作正常，但这是一种剧烈的分解，需要几分钟的时间才能让我清醒过来！你的最后一句话，设置初始状态，似乎更简单。在哪个阶段我会这样做？回到我使用createStoreWithMiddleware的地方？是的，您在创建存储中设置了初始状态。而不是在我的authReducer的第一行中？酷。如果您的问题确实得到了回答，请在上面加上标记。很高兴为您提供帮助！：）很乐意帮忙！：）