我想在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的事情来可视化日期?
这里的问题是,你想访问存储在 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}`);
});
你的经理是一个对象数组,如下图所示。
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>