Question

我应该在哪里处理此组件未加载所需state？

的问题

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

Uncaught TypeError: Cannot read property 'email' of undefined

...即使JSON.stringify行显示电子邮件属性（最终）存在。

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

看看我在构造函数方法中解决这个问题的天真尝试。它没有用。

处理这种情况的正确方法是什么？ render方法中有些条件？也试过，但仍然没有运气。

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

/////////// action /////////

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
                })
            })
    }

}

///////////////// reducer /////////////

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

Answer 1

Redux使用名为store的全局状态，它位于您的组件之外。

在constructor内，您有this.state = {...}声明。这是一个仅适用于Feature组件的本地状态。

来自connect的

react-redux基本上将store内的信息与您的组件props相关联，因此称为mapStateToProps。

将您的mapStateToProps修改为类似......

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

它的作用是尝试从商店中提取user属性，如果它尚未存在，请将其设置为空对象。您的错误是由于您的mapStateToProps访问尚未存在的用户属性。您可能希望将默认值设置为initialState以避免此问题。

Answer 2

所以这就是正在发生的事情..您正在为user对象发出服务器请求，并且在成功时，收到的对象存储在您的redux存储中。执行此类操作时，您的组件呈现如下：

您已向服务器发起了请求，这意味着您的商店目前没有user，因此该组件会以this.props.user undefined呈现。
您的请求已成功，user对象存储在您的商店中。发生这种情况时，react-redux将使用用户对象重新呈现您的组件，并且组件中可以使用this.props.user。

在this.props.user不可用后的第一步中，您在访问this.props.user.email时收到错误消息。虽然@jpdelatorre的答案非常好，但你可以做的另一件事就是在你的渲染方法中添加一个检查。
```
 render() {
     let user = this.props.user || {};
     ....
         {user.email}
     ....
 }
```

如何在React中呈现对象的属性？

2 个答案: