开发者问题收集

如何摆脱 TypeError:无法读取未定义错误的属性“map”?

2019-08-15
71

我尝试使用 user-list.js 文件中的 createListItems() 获取用户的 idfirstlast name

但是,我在运行程序时收到

"TypeError: Cannot read property 'map' of undefined"

错误,并且 (line7 / user-list.js) return this.props.users.map(user => {{ 为红色(不起作用)。

我不知道为什么会收到此错误,以及如何修复它。 有人知道如何摆脱这个错误吗?

user-list.js

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

class UserList extends Component {
  createListItems() {
    return this.props.users.map(user => {
      return (
        <li key={user.id}>
          {user.first}
          {user.last}
        </li>
      );
    });
  }

  render() {
    return <ul>{this.createListItems()}</ul>;
  }
}

function mapStateToProps(state) {
  return {
    users: state.users
  };
}

export default connect(mapStateToProps)(UserList);

index.js

import React, { Component } from "react";
import UserList from "../containers/user-list";

class Index extends Component {
  state = {};
  render() {
    return (
      <div>
        <h2>username list:</h2>
        <UserList />
        <hr />
        <h2>user details:</h2>
      </div>
    );
  }
}

export default Index;
2个回答

正如 warkentien2 所提到的,您没有将用户数组传递给 <UserList /> 组件。您需要在 index.js 中创建一个用户数组(手动或从其他地方拉取)并像这样传递它: <UserList users={[{id: 1, first: "John", last: "Doe"}]} />

technicallynick
2019-08-15

UserList 安装时,它会采取初始状态。并且最初 users 状态可能为 null / empty

您需要检查数据是否存在,

<ul>{ this.props.users && this.props.users.length > 0 && this.createListItems() }</ul>;
ravibagul91
2019-08-15