在多次嵌套对象上使用 ES6 .map() 以获取反应组件

Question

我如何迭代this object使用.map()：

state = { 

      contacts: [

        { "id":1,

           "name":"Leanne Graham",

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

           "address":{

              "street":"Kulas Light",

              "city":"Gwenborough",

              "geo":{

                 "lat":"-37.3159",

                 "lng":"81.1496"

              }

           },

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

        },

        { "id":2,

           "name":"Ervin Howell",

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

           "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{} 上崩溃了，此时我已经失去了信号。

任何人都可以给我一个想法？

Answer 1

这应该有助于：const address = contacts[0].address;<>&nbsp; {Object.keys().map((addressKey, index) => (&nbsp; &nbsp; <span className="d-block" key={index}>&nbsp; &nbsp; &nbsp; {typeof address[addressKey] === "object"&nbsp; &nbsp; &nbsp; &nbsp; ? Object.keys(address[addressKey]).map(e => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{address[addressKey][e]}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; : contacts[0].address[address]}&nbsp; &nbsp; </span>&nbsp; ))}</>;

Answer 2

我认为这不是问题，只要它显示它们映射后，contacts您可以随意增加地址属性：const contacts = [&nbsp; {&nbsp; &nbsp; id: 1,&nbsp; &nbsp; name: "Leanne Graham",&nbsp; &nbsp; email: "[e-mail]",&nbsp; &nbsp; address: {&nbsp; &nbsp; &nbsp; street: "Kulas Light",&nbsp; &nbsp; &nbsp; city: "Gwenborough",&nbsp; &nbsp; &nbsp; geo: {&nbsp; &nbsp; &nbsp; &nbsp; lat: "-37.3159",&nbsp; &nbsp; &nbsp; &nbsp; lng: "81.1496",&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },&nbsp; &nbsp; phone: "1-770-736-8031",&nbsp; },&nbsp; {&nbsp; &nbsp; id: 2,&nbsp; &nbsp; name: "Ervin Howell",&nbsp; &nbsp; email: "[e-mail]",&nbsp; &nbsp; address: {&nbsp; &nbsp; &nbsp; street: "Victor Plains",&nbsp; &nbsp; &nbsp; city: "Wisokyburgh",&nbsp; &nbsp; &nbsp; geo: {&nbsp; &nbsp; &nbsp; &nbsp; lat: "-43.9509",&nbsp; &nbsp; &nbsp; &nbsp; lng: "-34.4618",&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },&nbsp; &nbsp; phone: "010-692-6593",&nbsp; },];const addresses = contacts.map(({ address, id }) => ({&nbsp; id,&nbsp; ...address,}));console.log(addresses);就像渲染它们一样：addresses.map(({ street, city, id }) => (&nbsp; <span className="d-block" key={id}>&nbsp; &nbsp; {street}:{city}&nbsp; </span>))

Answer 3

您可以映射一个数组，因为您希望它在每个元素中具有一致的值，但对于 object，情况并非如此。所有的值都是不同的，具有不同的含义。此外，您的 span 将无法显示对象，它只会显示原始值，例如字符串或数字您可以手动完成您想要实现的目标。const { contacts } = this.state;return (&nbsp; <>&nbsp; &nbsp; {contacts.map(({ address }, id) => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <React.Fragment key={id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Street: {address.street}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>City: {address.city}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Lat: {address.geo.lat}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Lng: {address.geo.lng}</span>&nbsp; &nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; })}如果您真的想使用循环或某种形式的迭代来做到这一点，您可以查看Object.entries。但是如果你不知道你在处理什么，那么使用嵌套对象真的很难做到这一点。contacts.map(({ address }) => {&nbsp; for (let [key, value] of Object.entries(address)) {&nbsp; &nbsp; console.log(`${key}: ${value}`); // logs "street: Kulas Light"&nbsp; }})但是请注意，如果您将其直接放入跨度中geo，它将给出。"geo: [Object object]"PS我建议找到一个比片段的数组索引更好的键。