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

render（）{
常量用户=[
“汤姆”：{
电话:"123",，
电子邮件：“hotmail”
},
“罗布”：{
电话：321，
电子邮件：“雅虎”
},
“鲍勃”：{
电话：333，
电子邮件：“gmail”
},
];
const list=users.map（（用户）=>
(),
);
返回
{list}
；
}

输出如下所示：

下面是子组件的渲染函数：

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

render（）{
常数{
名称
电话，
电子邮件，
}=这是道具；
const info=[姓名、电话、电子邮件]；
const item=info.map（（索引）=>(

{index}

));
退货项目；
}

---

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

首先，这不是有效的javascript：

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

您应该定义数组或对象。假设您的

用户

是一个对象文字：

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

然后您可以迭代对象的以下部分：

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

const list=Object.entries（users.map）（[name，info]）=>
()
);

---

但是，并非所有浏览器都支持

Object.entries（）

，请检查它是否在您的环境中工作。

您需要在父组件的映射函数中引用“用户”而不是“用户”。“user”变量的用途是表示数组中每个元素的当前实例。因此，map函数应该如下所示：

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

const list=users.map（（user）=>
(),
);

---

相反。

第一件事是

用户

不是有效数组。如果您希望在主作用域中使用键值对，则使用

对象

（{}）

render（）{
常量用户={
“汤姆”：{
电话:"123",，
电子邮件：“hotmail”
},
“罗布”：{
电话：321，
电子邮件：“雅虎”
},
“鲍勃”：{
电话：333，
电子邮件：“gmail”
},
};
const list=Object.key（users.map）（user）=>
(),
);
返回
{list}
；
}

一种解决方案是将“列表”更改为实际列表：

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

现在是user

user.name

而不是

user

或者，创建一个由每个用户的名称设置关键帧的对象：

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

然后在关键点上映射：

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

const list=Object.key（users.map）（user）=>
(),
);

您的const用户应该被修改为通过它们进行映射

 const users = [
            {
            name: 'tom',
            phone: '123',
            email: 'hotmail',
          },
          {
            name:'rob',
            phone: '321',
            email: 'yahoo'
          },
          {
            name: 'bob',
            phone: '333',
            email: 'gmail'
          },
    ];
    const list = users.map((usr =>
      (<User
        name={usr.name}
        phone={usr.phone}
        email={usr.email}
      />),
    );

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

const用户=[
{
名字：“汤姆”，
电话:"123",，
电子邮件：“hotmail”，
},
{
姓名:"罗布",，
电话：321，
电子邮件：“雅虎”
},
{
姓名：'鲍勃'，
电话：333，
电子邮件：“gmail”
},
];
const list=users.map（（usr=>
(),
);
返回
{list}
；
}

您的

用户

变量被分配了一个看起来更像对象的数组。。。