javascript - 在多次嵌套对象上使用 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{} 上崩溃了，此时我已经失去了信号。

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

标签： javascriptreactjsobjectecmascript-6array.prototype.map

Answer 1

我认为这不是问题，只要它显示它们

映射后，contacts您可以随意增加地址属性：

const 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",
  },
];

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>
))