我是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/

10-12 04:21
查看更多