选择循环react js与数组的对象

Question

我有一个对象数组

let arr= [0: {received: "Return Received", approved: "Approved", rejected: "Rejected"} 1: {authorized: "Authorized", received: "Return Received"}}

我想把数据推入<option></options>

在循环中执行时，第一个set应该创建一个选项集，如first set create and option和第二个next option。

,

<Select><option key="received" >Return Received</options<option key="approved">Approved</options><option key="rejected">Rejected</options><Select>
<Select><option key="authorized" >Authorized</options><option key="received">ReturnReceived</options><Select>

我尝试了下面的代码，但我得到所有的结果在单一选项

const listItems = Object.entries(arr).map(([key, value]) => (
console.log(Object.keys(arr[0]).length),
Object.entries(value).map(([name, data]) => (
<option key={name}>{name}</option>
) 
)
)
);

<Select native={true}>{listItems}<Select>

Answer 1

您应该为每个键创建一个<select>，但您总共只创建一个。试试这样做:

const obj = {
0: {
received: "Return Received",
approved: "Approved",
rejected: "Rejected"
},
1: {
authorized: "Authorized",
received: "Return Received"
}
};
const listItems = Object.entries(obj).map(([key, value]) => (
<select key={key}>
{Object.entries(value).map(([name, data]) => (
<option key={name}>{name}</option>
))}
</select>
));

这是一个沙盒:https://codesandbox.io/s/bitter-feather-emizf

这也有点奇怪，你调用arr一个数组，你说你是push数据到它，但然后使用Object.entries和对象语法似乎它。不管怎样，我假设它是上面的一个物体。为了防止您被数组方面所困扰，我还添加了一个数组结构:

const arr = [
{
received: "Return Received",
approved: "Approved",
rejected: "Rejected"
},
{
authorized: "Authorized",
received: "Return Received"
}
];
const arrList = arr.map((value, index) => (
<select key={index}>
{Object.entries(value).map(([name, data]) => (
<option key={name}>{name}</option>
))}
</select>
));