Вложенные картографические реакции - PullRequest
Новая
       25

Вложенные картографические реакции

0 голосов
/ 10 ноября 2019

Я сопоставляю список объектов в моем приложении для реагирования следующим образом 

(countrydata !== null) ? Object.keys(countrydata).map((item, key) => {
  return (
    <img src={countrydata[item].image_location}/>
  )
})

У меня также есть массив, который содержит точное количество объектов, как в списке объектов, которые я отобразил выше. Я хочу отобразить определенные данные, которые находятся в объектах массива, и я попытался сделать что-то вроде этого 

(countrydata !== null) ? Object.keys(countrydata).map((item, key) => {
  arrayOfObjects.map((arrayItem,key)=>{
    return (
      <div>
        <img src={countrydata[item].image_location}/>
        <span>{arrayItem.name}</span>
      </div>
    )
  })            
})

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

Редактировать:

Мой список объектов выглядит следующим образом (countrydata) 

place_1:{description:'',image_location:'',location:''}
place_2:{description:'',image_location:'',location:''}
place_3:{description:'',image_location:'',location:''}

Мой массивобъектов выглядит следующим образом (arrayOfObjects) 

0: {distance: {…}, duration: {…}, status: "OK"}
1: {distance: {…}, duration: {…}, status: "OK"}
2: {distance: {…}, duration: {…}, status: "OK"}

Ответы [ 2 ]

0 голосов
/ 10 ноября 2019

Вы можете объединить два массива и объединить значения из второго массива. 

const data = {
place_1: { name: 'One'},
place_2: { name: 'Two'},
place_3: { name: 'Three'},
};

const countrydata = [];

const locations = [{distance: {}, duration: {}, status: "OK"},
{distance: {}, duration: {}, status: "OK"},
{distance: {}, duration: {}, status: "OK"}]

Object.keys(data).forEach((key, index) => countrydata.push({ [key]: { ...data[key], distance: locations[index].distance, duration: locations[index].duration }}))

console.log(countrydata);

Затем визуализируйте массив как 

countrydata.map((item, key) => {
 return (
  <div>
    <img src={countrydata['place_' + key].image_location}/>
    <span>{countrydata['place_' + key].name}</span>
  </div>
 )
})
0 голосов
/ 10 ноября 2019

Вам не нужно другое вложенное map. Вы можете map оба одновременно, используя только один map, вы будете использовать индекс, предоставленный для обратного вызова, для доступа к элементу из другого массива / объекта.

Кстати, так как порядокключи объекта ненадежны, я предлагаю вам map над массивом arrayOfObjects и использовать индекс для генерации ключа, который вы будете использовать для доступа к соответствующему объекту из countrydata: 

arrayOfObjects.map((arrayItem, index) => {
  let key = "place_" + (index + 1);                      // generate the key to access an object from 'countrydata'. If we are at the first object (index == 0), the key will be "place_1"
  return (
    <div>
      <img src={countrydata[key].image_location}/>       // access the matching object from 'countrydata' and use it
      <span>{arrayItem.name}</span>                      // access the current array item from 'arrayOfObjects'
    </div>
  );
})
...