我是React的新手,我只是一步一步地遵循了教程,并获得了其他结果。我收到的错误消息是:
无法读取未定义的属性“名称”。
问题是为什么名称未定义?我添加了需要在页面上显示列表的对象。
这是我的代码所在:
import React, { Component } from "react";
class UserItem extends Component {
render() {
return (
<li className="UserLI">
{this.props.users.name} is {this.props.users.age} years old.
</li>
);
}
}
export default UserItem;
这是我调用上述代码的地方:
class Users extends Component {
render() {
let userItem;
if (this.props.users) {
userItem = this.props.users.map(user => {
console.log(user);
return <UserItem key={user.id} user={user} />;
});
}
return <div classNname="Users">{userItem}</div>;
}
}
我的JSON数据
this.setState({users:[
{
id:0,
name: "karam",
age:22
},
{
id:1,
name: "ayoub",
age:23
},
{
id:2,
name: "tarek",
age:21
}
]});
最佳答案
问题是代码呈现时您的数据不可用。您可以通过添加基本验证来解决该问题。
class UserItem extends Component {
render() {
return (
<li className="UserLI">
{this.props.users && this.props.users.name} is {this.props.users && this.props.users.age} years old.
</li>
);
}
}
关于javascript - react :TypeError:无法读取未定义的属性“名称”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50219375/