时间戳

首页 > 解决方案 > 如何遍历 React 组件中数组内对象的属性？

javascript - 如何遍历 React 组件中数组内对象的属性？

问题描述

这是我的父组件的渲染功能：

  render() {
    const users = [
      'tom': {
        phone: '123',
        email: 'hotmail'
      },
      'rob': {
        phone: '321',
        email: 'yahoo'
      },
      'bob': {
        phone: '333',
        email: 'gmail'
      },
    ];

    const list = users.map((user) =>
      (<User
        name={user}
        phone={users.phone}
        email={users.email}
      />),
    );

    return <ul>{list}</ul>;
  }

输出显示如下：

在此处输入图像描述

这是子组件的渲染函数：

  render() {
    const {
      name,
      phone,
      email,
    } = this.props;

    const info = [name, phone, email];

    const item = info.map((index) => (
      <li key={index}>
        { index }
      </li>
    ));

    return item;
  }

我怎样才能让它与电话号码和电子邮件一起显示？不知道我做错了什么。谢谢。

标签： javascriptarraysreactjsloopsobject

解决方案

起初，这不是有效的 javascript：

const users = [
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
];

您应该定义一个数组或一个对象。假设你users是一个对象文字：

const users = {
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
};

然后您可以遍历对象的条目：

const list = Object.entries(users).map(([name, info]) =>
  (<User
    name={name}
    phone={info.phone}
    email={info.email}
  />)
);

但是Object.entries()并非所有浏览器都支持，请检查它是否适用于您的环境。

推荐阅读