在多次嵌套对象上使用 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;

<>

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

  ))}

</>;

Answer 2

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

映射后，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>

))

Answer 3

您可以映射一个数组，因为您希望它在每个元素中具有一致的值，但对于 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我建议找到一个比片段的数组索引更好的键。