Question

我是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
  }
]});

Answer 1

问题在于，代码渲染后，您的数据就不会出现。您可以通过添加基本验证来解决该问题。

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>
    );
  }
}

Answer 2

你传递user道具：

<UserItem key={user.id} user={user} />

但您尝试以users

的形式访问它

<li className="UserLI">
    {this.props.users.name} is {this.props.users.age} years old.
</li>

这是一个错字。修正：

<li className="UserLI">
    {this.props.user.name} is {this.props.user.age} years old.
</li>

Answer 3

您需要从name而不是age访问this.props.user和this.props.users，因为您要将数据作为道具user传递

class UserItem extends Component {
    render() {
        return(
            <li className="UserLI">
                {this.props.user.name} is {this.props.user.age} years old.
            </li>
        )  
    }
}
export default UserItem;

REACT：TypeError：无法读取未定义的属性“name”

3 个答案: