Я пытаюсь получить id, first и last name пользователей, использующих createListItems() внутри user-list.js файла.

Но я получил

Msgstr "Ошибка типа: невозможно прочитать свойство 'карта' из неопределённого"

Ошибка, когда я запустил программу, и (line7 / user-list.js) return this.props.users.map(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;
0
lll 15 Авг 2019 в 05:21

2 ответа

Лучший ответ

Как упоминалось в warkentien2, вы не передаете массив users в компонент <UserList />. Вам нужно создать массив в index.js ваших пользователей (вручную или извлеченный из другого места) и выдать его так: <UserList users={[{id: 1, first: "John", last: "Doe"}]} />

1
technicallynick 15 Авг 2019 в 02:39

Когда UserList монтируется, он принимает начальное состояние. И изначально состояние users может быть null / empty.

Вам нужно проверить, есть ли данные,

<ul>{ this.props.users && this.props.users.length > 0 && this.createListItems() }</ul>;
0
ravibagul91 15 Авг 2019 в 03:07