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

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 = [

  {

    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]" }]

  }

];

function App() {

  return (

    <section>

    {filters.map(data => {

      const label = <label> {data.label} </label>

      return (

        <section>

            {label}

          <select>

            {data.options.map(option => {

              return(

                <option value={option.value}> {option.value} </option>

              )

            })}

          </select>

        </section>

      )

    })}

    </section>

  )

}

Answer 2

从其他文件导入它们：

import { usersRowData as filters } from "./otherFile";