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

Question

如何使用.map() 遍历this object：

state = { 
      contacts: [
        { "id":1,
           "name":"Leanne Graham",
           "email":"Sincere@april.biz",
           "address":{
              "street":"Kulas Light",
              "city":"Gwenborough",
              "geo":{
                 "lat":"-37.3159",
                 "lng":"81.1496"
              }
           },
           "phone":"1-770-736-8031",
        },
        { "id":2,
           "name":"Ervin Howell",
           "email":"Shanna@melissa.tv",
           "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>
        ))}
    </>
  );
}

它应该与地址一起使用，但在地理上崩溃了{}，此时我已经失去了信号。

谁能给我一个ideea？

Answer 1

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

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

const contacts = [
  {
    id: 1,
    name: "Leanne Graham",
    email: "Sincere@april.biz",
    address: {
      street: "Kulas Light",
      city: "Gwenborough",
      geo: {
        lat: "-37.3159",
        lng: "81.1496",
      },
    },
    phone: "1-770-736-8031",
  },
  {
    id: 2,
    name: "Ervin Howell",
    email: "Shanna@melissa.tv",
    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>
))

Answer 2

您可以映射一个数组，因为您希望它在每个元素中具有一致的值，但对于 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]"。

P.S 我建议为 Fragment 找到比数组索引更好的键。

Answer 3

这应该会有所帮助：

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>
  ))}
</>;