Question

我从后端（节点）获取数据并且无法显示嵌套对象，我尝试使用地图，但即使在那里我也遇到了相同的问题/错误消息。

这是我的代码或更好的相同组件。

import React, {Component} from 'react';
import cookie from 'react-cookie';
import {connect} from 'react-redux';
import {fetchUser} from '../../../actions/index';

import UserInfo from './user-info';

class ViewProfile extends Component {

  constructor(props) {
    super(props);
  }

  componentWillMount() {
    if (cookie.load('user')) {
      const userId = cookie.load('user')._id;
      this.props.fetchUser(userId);
    }
  }


  render() {
    let test = this.props.user.profile.firstName;
    return (
      <div>
        <h1>{this.props.user.email}</h1>
        {test}
      </div>

    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user.profile
  }
}

export default connect(mapStateToProps, {fetchUser})(ViewProfile);

这是错误

bundle.js:6 Uncaught TypeError: Cannot read property 'firstName' of undefined(…)

我从服务器返回一个对象，它具有以下结构：

{_id: ...,
 email: ...,
 profile:{firstName: 'a', lastName:'b'},....
}

我想显示名称。我该如何归档？

更新1

我通过减速机发送以下内容：

....
case FETCH_USER:
  return {...state, profile: action.payload};

溶液

  renderUserInfo() {
    if (this.props.user.profile) {
      return (
        <UserInfo profile={this.props.user.profile}/>
      )
    }
  }

  render() {
    return (
      <div>
        <h1>{this.props.user.email}</h1>
        {this.renderUserInfo()}
      </div>
    );
  }

Answer 1

如果fetchUser（）是一个异步函数，那么在获取用户时，this.props.user将在render（）内部未定义。您可以在render（）

的开头添加它

if(!this.props.user) { // or !this.props.user.profile depending on your initialState
   return null; 
}

Answer 2

看起来你正在处理异步操作。您可以在获取数据时调度FETCH_USER类型的操作。但是，多个动作类型总是更好地描述你所处的获取状态。Here是如何处理异步操作的一个例子。

React redux无法读取属性＆＃39; firstName＆＃39;未定义的

这是错误

更新1

溶液

2 个答案: