第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何循環(huán)數(shù)組并將對(duì)象數(shù)組中的值輸出為“值”和“標(biāo)簽”?

如何循環(huán)數(shù)組并將對(duì)象數(shù)組中的值輸出為“值”和“標(biāo)簽”?

qq_笑_17 2021-05-07 14:12:01
我在單獨(dú)的文件中將以下數(shù)據(jù)作為對(duì)象數(shù)組export const usersRowData = [  {    "id": 1,    "name": "Leanne Graham",    "username": "Bret",    "email": "Sincere@april.biz",    "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": "Shanna@melissa.tv",    "address": {      "street": "Victor Plains",      "suite": "Suite 879",      "city": "Wisokyburgh",      "zipcode": "90566-7771",      "geo": {        "lat": "-43.9509",        "lng": "-34.4618"      }    }  }]在我的React組件內(nèi)部,我將這些過濾器數(shù)據(jù)用于下拉列表硬編碼為值和標(biāo)簽: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: "Sincere@april.biz", label: "Sincere@april.biz" }]  }];我如何循環(huán)數(shù)組將每個(gè)名稱輸出為我的react組件內(nèi)的值和標(biāo)簽,以便可以在列表中顯示它們。
查看完整描述

2 回答

?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

您是說要顯示選項(xiàng)和價(jià)值嗎?


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: "Sincere@april.biz", label: "Sincere@april.biz" }]

  }

];


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>

  )

}



查看完整回答
反對(duì) 回復(fù) 2021-05-20
?
慕姐8265434

TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊

從其他文件導(dǎo)入它們:

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


查看完整回答
反對(duì) 回復(fù) 2021-05-20
  • 2 回答
  • 0 關(guān)注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)