如何循环数组并将对象数组中的值输出为“值”和“标签”？

Question

我在单独的文件中将以下数据作为对象数组

export const usersRowData = [

  {

    "id": 1,

    "name": "Leanne Graham",

    "username": "Bret",

    "email": "[e-mail]",

    "address": {

      "street": "Kulas Light",

      "suite": "Apt. 556",

      "city": "Gwenborough",

      "zipcode": "92998-3874",

      "geo": {

        "lat": "-37.3159",

        "lng": "81.1496"

      }

    },

    "value": "Leanne Graham",

    "label": "Leanne Graham"

  },

  {

    "id": 2,

    "name": "Ervin Howell",

    "username": "Antonette",

    "email": "[e-mail]",

    "address": {

      "street": "Victor Plains",

      "suite": "Suite 879",

      "city": "Wisokyburgh",

      "zipcode": "90566-7771",

      "geo": {

        "lat": "-43.9509",

        "lng": "-34.4618"

      }

    }

  }

]

在我的React组件内部，我将这些过滤器数据用于下拉列表硬编码为值和标签：

const filters = [

  {

    label: "name",

    options: [

      { value: "Dietrich", label: "Dietrich" },

      { value: "Patricia", label: "Patricia" }

    ]

  },

  {

    label: "username",

    options: [

      { value: "Kamren", label: "Kamren" },

      { value: "Bret", label: "Bret" }

    ]

  },

  {

    label: "email",

    options: [{ value: "[e-mail]", label: "[e-mail]" }]

  }

];

我如何循环数组将每个名称输出为我的react组件内的值和标签，以便可以在列表中显示它们。

Answer 1

您是说要显示选项和价值吗？const filters = [&nbsp; {&nbsp; &nbsp; label: "name",&nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; { value: "Dietrich", label: "Dietrich" },&nbsp; &nbsp; &nbsp; { value: "Patricia", label: "Patricia" }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; label: "username",&nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; { value: "Kamren", label: "Kamren" },&nbsp; &nbsp; &nbsp; { value: "Bret", label: "Bret" }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; label: "email",&nbsp; &nbsp; options: [{ value: "[e-mail]", label: "[e-mail]" }]&nbsp; }];function App() {&nbsp; return (&nbsp; &nbsp; <section>&nbsp; &nbsp; {filters.map(data => {&nbsp; &nbsp; &nbsp; const label = <label> {data.label} </label>&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {label}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data.options.map(option => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value={option.value}> {option.value} </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; })}&nbsp; &nbsp; </section>&nbsp; )}

Answer 2

从其他文件导入它们：import&nbsp;{&nbsp;usersRowData&nbsp;as&nbsp;filters&nbsp;}&nbsp;from&nbsp;"./otherFile";