如何摆脱 TypeError:无法读取未定义错误的属性“map”?
2019-08-15
71
我尝试使用
user-list.js
文件中的
createListItems()
获取用户的
id
、
first
和
last 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