использовать ES6 .map () для многократно вложенных объектов для реагирующих компонентов

Question

Как я могу перебрать this object, используя .map():

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

, чтобы карта контактов работала, потому что это массив, и все данные, такие как идентификатор, имя, адрес электронной почты и телефон, доступны, но если я хочу перебрать адрес, происходит сбой. Я использовал такой пример, как:

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: "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 3

Вы можете отобразить массив, поскольку ожидаете, что он будет иметь согласованные значения для каждого элемента, но на самом деле это не относится к объекту. Все значения разные и имеют разное значение. Кроме того, ваш диапазон не сможет отображать объекты, он будет содержать только примитивные значения, такие как строки или числа

Вы можете делать то, что хотите достичь вручную.

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

Если вы действительно Вы хотите сделать это, используя al oop или какую-либо итерацию, которую вы можете посмотреть в 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 Я бы порекомендовал найти ключ лучше, чем индекс массива для фрагмента.