亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在多次嵌套對象上使用 ES6 .map() 以獲取反應組件

在多次嵌套對象上使用 ES6 .map() 以獲取反應組件

慕少森 2022-05-26 16:23:32
我如何迭代this object使用.map():state = {       contacts: [        { "id":1,           "name":"Leanne Graham",           "email":"[email protected]",           "address":{              "street":"Kulas Light",              "city":"Gwenborough",              "geo":{                 "lat":"-37.3159",                 "lng":"81.1496"              }           },           "phone":"1-770-736-8031",        },        { "id":2,           "name":"Ervin Howell",           "email":"[email protected]",           "address":{              "street":"Victor Plains",              "city":"Wisokyburgh",              "geo":{                 "lat":"-43.9509",                 "lng":"-34.4618"              }           },           "phone":"010-692-6593",        }     ]    }所以映射聯系人將起作用,因為它是一個數組,所有數據(如 id、姓名、電子郵件和電話)都可以訪問,但如果我想遍歷地址,則會崩潰。我使用了一些示例,例如:render(){  const {contacts} = this.state  return(    <>       {Object.keys(contacts.address).map((address, index) => (          <span className="d-block" key={index}>{contacts.address[address]}</span>        ))}    </>  );}它應該與地址一起使用,但在 geo{} 上崩潰了,此時我已經失去了信號。任何人都可以給我一個想法?
查看完整描述

3 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

這應該有助于:


const address = contacts[0].address;


<>

  {Object.keys().map((addressKey, index) => (

    <span className="d-block" key={index}>

      {typeof address[addressKey] === "object"

        ? Object.keys(address[addressKey]).map(e => (

            <span>{address[addressKey][e]}</span>

          ))

        : contacts[0].address[address]}

    </span>

  ))}

</>;


查看完整回答
反對 回復 2022-05-26
?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

我認為這不是問題,只要它顯示它們


映射后,contacts您可以隨意增加地址屬性:


const contacts = [

  {

    id: 1,

    name: "Leanne Graham",

    email: "[email protected]",

    address: {

      street: "Kulas Light",

      city: "Gwenborough",

      geo: {

        lat: "-37.3159",

        lng: "81.1496",

      },

    },

    phone: "1-770-736-8031",

  },

  {

    id: 2,

    name: "Ervin Howell",

    email: "[email protected]",

    address: {

      street: "Victor Plains",

      city: "Wisokyburgh",

      geo: {

        lat: "-43.9509",

        lng: "-34.4618",

      },

    },

    phone: "010-692-6593",

  },

];


const addresses = contacts.map(({ address, id }) => ({

  id,

  ...address,

}));


console.log(addresses);


就像渲染它們一樣:


addresses.map(({ street, city, id }) => (

  <span className="d-block" key={id}>

    {street}:{city}

  </span>

))


查看完整回答
反對 回復 2022-05-26
?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

您可以映射一個數組,因為您希望它在每個元素中具有一致的值,但對于 object,情況并非如此。所有的值都是不同的,具有不同的含義。此外,您的 span 將無法顯示對象,它只會顯示原始值,例如字符串或數字


您可以手動完成您想要實現的目標。


const { contacts } = this.state;

return (

  <>

    {contacts.map(({ address }, id) => {

      return (

        <React.Fragment key={id}>

          <span>Street: {address.street}</span>

          <span>City: {address.city}</span>

          <span>Lat: {address.geo.lat}</span>

          <span>Lng: {address.geo.lng}</span>

        </React.Fragment>

      );

    })}

如果您真的想使用循環或某種形式的迭代來做到這一點,您可以查看Object.entries。但是如果你不知道你在處理什么,那么使用嵌套對象真的很難做到這一點。


contacts.map(({ address }) => {

  for (let [key, value] of Object.entries(address)) {

    console.log(`${key}: ${value}`); // logs "street: Kulas Light"

  }

})

但是請注意,如果您將其直接放入跨度中geo,它將給出。"geo: [Object object]"


PS我建議找到一個比片段的數組索引更好的鍵。


查看完整回答
反對 回復 2022-05-26
  • 3 回答
  • 0 關注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號