Select 循环反应 js 与对象数组

Question

我有一个对象数组

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

我想将数据推送到 <option></options>

在循环中执行时，第一个 set 应该设置一个选项集，例如 first set create 和 option 以及第二个 next 选项

例如：

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

Select 循环反应 js 与对象数组

Select loop react js with array of objects

javascript

ecmascript-6

reactjs

material-ui