如何在React中循环处理一个对象？

Question

我想在a中映射一个这样的对象，但是不行。

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

  13: {name: "Name2", surname: "Surname2", agenda: Array(1)}
  __proto__: Object
  length: 1
  __proto__: Array(0)

我该怎么做呢？

首先，我有一个数组（没有议程），我已经做了这种方式，但现在它不工作。

<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
           <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
            {managers && managers.length && managers.map((manager, key) => (
              <option key={key}  value= {manager.id}  name="manager_id" >{manager.name} {manager.surname}</option>
            ))}
            </select>

我可以使用名字和姓氏创建一个，但也可以在Agenda数组中输入（在这种情况下，我应该做一些类似manager. agenda.date的事情来可视化日期？

Answer 1

这里的问题是，你想访问存储在 manager 数组作为对象和 .map() 方法不能在对象上使用。为此，你可以使用 Object.entries() 方法，因为你还需要对象键，而这个对象键实际上是 manager.id.

所以，假设 manager 这里是我们会简单做的主数组。

{manager && manager.length && Object.entries(manager[0]).map(([k, v]) => (
   <option 
     key={k}  
     value={k}  
     name="manager_id" >
     {v.name} {v.surname}
   </option>
))}

注意： 请注意，你需要使用 Object.entries(manager[0]) 此处 manager[0] 是这里的实际对象。

下面是一个简单的演示，以了解什么是 Object.entries() 方法。

const obj = {
  12: {name: 'Name1'},
  13: {name: 'Name2'}
};

Object.entries(obj).map(([k, v]) => {
  console.log(`${k} ${v.name}`);
});

Answer 2

你的经理是一个对象数组，如下图所示。

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

  13: {name: "Name2", surname: "Surname2", agenda: Array(1)}
  __proto__: Object
  length: 1
  __proto__: Array(0)

如果你想映射其中的经理人 那么你必须循环经理人数组 然后再映射每个键的经理人。

这是因为你在数据中的嵌套。

manager: [{…}]

0:

12:

或者你可以访问管理器数组的第一个元素，并在渲染中映射它。

...
manager=Object.values(manager[0]) //Do checking here if 0 is actually an object. Object doesn't have .map
...
render(
...
<select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
       <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
        {managers && managers.map((manager, key) => (
          <option key={key}  value= {manager.id}  name="manager_id" > 
 {manager.name} {manager.surname}</option>
        ))}
        </select>