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

Posted 2023-02-14

【中文标题】在多次嵌套对象上使用 ES6 .map() 以获取反应组件

【英文标题】：use ES6 .map() on multiple times nested objects for react components

【发布时间】：2020-07-03 19:48:30

【问题描述】：

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

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

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

谁能给我一个ideea？

【问题讨论】：

在地理情况下您希望输出如何？

@Supercool 我认为只要显示它们就没有关系

【参考方案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>
))

【参考方案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 找到比数组索引更好的键。

【讨论】：

这对我来说看起来不错，但对我的代码不起作用：|你可以在这里添加你的例子吗？ codesandbox.io/s/wonderful-mahavira-bmsqw

codesandbox.io/s/sharp-noether-cr4km。在这里添加了一个解决方案，问题是我没有在元素之前添加片段。我也会更新答案。

【参考方案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>
  ))
</>;