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

Posted 2023-02-22

【中文标题】如何遍历 React 组件中数组内对象的属性？

【英文标题】：How to loop through properties of objects inside of an array within a React component?

【发布时间】：2018-10-18 19:37:17

【问题描述】：

这是我的父组件的渲染函数：

  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;
  

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

【问题讨论】：

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

【参考方案1】：

起初这是无效的javascript：

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

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

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

然后你可以遍历对象的entries：

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

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

【参考方案2】：

第一件事是users 不是一个有效的数组如果你想在主范围内使用键值对然后使用Object()

 render() 
        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
          />),
        );

        return <ul>list</ul>;
      

【参考方案3】：

您需要在 Parent 组件的 map 函数中引用“user”而不是“users”。 “user”变量的目的是表示数组中每个元素的当前实例。所以地图函数应该是这样的：

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

改为。

【参考方案4】：

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

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

现在用户 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
  />),
);

【参考方案5】：

应该修改您的 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>;