Я пытаюсь получить 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;
2 ответа
Как упоминалось в warkentien2, вы не передаете массив users в компонент <UserList />
. Вам нужно создать массив в index.js ваших пользователей (вручную или извлеченный из другого места) и выдать его так: <UserList users={[{id: 1, first: "John", last: "Doe"}]} />
Когда UserList
монтируется, он принимает начальное состояние. И изначально состояние users
может быть null
/ empty
.
Вам нужно проверить, есть ли данные,
<ul>{ this.props.users && this.props.users.length > 0 && this.createListItems() }</ul>;
Похожие вопросы
Новые вопросы
reactjs
React — это библиотека JavaScript для создания пользовательских интерфейсов. Он использует декларативную парадигму на основе компонентов и стремится быть эффективным и гибким.