Question

我正在使用id文件中的first来吸引last name，createListItems()和user-list.js的用户。

但是，我得到了

“ TypeError：无法读取未定义的属性'map'”

我运行程序时出错，并且(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;

Answer 1

正如warkentien2所述，您没有将users数组传递给<UserList />组件。您需要在用户的index.js中创建一个数组（手动或从其他地方拉出），并将其传递为：<UserList users={[{id: 1, first: "John", last: "Doe"}]} />

Answer 2

安装UserList时，它将进入初始状态。最初的users状态可能是null / empty。

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

<ul>{ this.props.users && this.props.users.length > 0 && this.createListItems() }</ul>;

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

2 个答案: