嵌套映射 reactjs

Question

我正在我的 react 应用中映射对象列表，如下所示

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

但无法达到我想要的结果。如何在对象列表的映射中映射对象数组？

编辑：

我的对象列表如下所示（国家数据）

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

Answer 1

您不需要另一个嵌套的map。您可以只使用一个map 同时map 他们两个，您将使用提供给回调的索引来访问另一个数组/对象中的项目。

顺便说一句，由于对象键的顺序不可靠，我建议您在数组arrayOfObjects 上使用map 并使用索引生成用于从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>
  );
})

Answer 2

您可以合并两个数组并合并第二个数组中的值。

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