Javascript 如何使用map（）为数组中的每个元素返回多个组件？

我试着这样做。 我想为每个“ev”返回多个

。但它只为每个“ev”返回一个

。storm变量中的for循环仅执行一次。 我还尝试在返回函数中保留for循环，但出现了一个错误

提前谢谢

import { useState } from 'react';
import GoogleMapReact from 'google-map-react';
import LocationMarker from './LocationMarker';
import LocationInfoBox from './LocationInfoBox';
const NATURAL_EVENT_SEVERESTORMS = 'severeStorms';
const Map = ({ eventData, center, zoom }) => {
const [locationInfo, setLocationInfo] = useState(null);
const storms = eventData.map((ev) => {
    if (ev.categories[0].id === NATURAL_EVENT_SEVERESTORMS) {
      for (let i = 0; i < ev.geometry.length; i++) {
        return (
          <LocationMarker
            lat={ev.geometry[i].coordinates[1]}
            lng={ev.geometry[i].coordinates[0]}
            type='severeStorms'
            onClick={() => setLocationInfo({ id: ev.id, title: ev.title })}
          />
        );
      }
    }
    return null;
  });

  return (
    <div className='map'>
      <GoogleMapReact
        bootstrapURLKeys={{  }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        {storms}
      </GoogleMapReact>

      {locationInfo && <LocationInfoBox info={locationInfo} />}
    </div>
  );
};

Map.defaultProps = {
  center: {
    lat: 42.3265,
    lng: -122.8756,
  },
  zoom: 4,
};

export default Map;

从'react'导入{useState}；
从“谷歌地图反应”导入谷歌地图反应；
从“./LocationMarker”导入LocationMarker；
从“/LocationInfoBox”导入LocationInfoBox；
const NATURAL_EVENT_SEVERESTORMS='SEVERESTORMS'；
常量映射=（{eventData，center，zoom}）=>{
const[locationInfo，setLocationInfo]=useState（null）；
const storms=eventData.map（（ev）=>{
如果（ev.categories[0].id==自然事件事件事件）{
for（设i=0；i
);
}
}
返回null；
});
返回(
{风暴}
{locationInfo&&}
);
};
Map.defaultProps={
中心：{
拉脱维亚：42.3265，
液化天然气：-122.8756，
},
缩放：4，
};
导出默认地图；

在

for

循环的第一次迭代中返回

LocationMarker

JSX。相反，您应该再次使用

map

方法

const storms=eventData.map（（ev）=>{
如果（ev.categories[0].id==自然事件事件事件）{
返回ev.geometry.map（（geo）=>{
返回(
setLocationInfo（{id:ev.id，title:ev.title}）}
/>
);
});
}
返回null；
});

还要注意，在迭代呈现JSX列表时，必须添加一个“key”属性

const storms=eventData.map（（ev）=>{
如果（ev.categories[0].id==自然事件事件事件）{
返回ev.geometry.map（（geo）=>{
返回(
setLocationInfo（{id:ev.id，title:ev.title}）}
/>
);
});
}
返回null；
});

您可以在此处阅读更多关于此的信息：

---

这里有两个嵌套循环，因此为了获得实际数组，需要连接每个循环记录，或者只使用reduce。 像这样的方法应该会奏效：

从'react'导入{useState}；
从“谷歌地图反应”导入谷歌地图反应；
从“./LocationMarker”导入LocationMarker；
从“/LocationInfoBox”导入LocationInfoBox；
const NATURAL_EVENT_SEVERESTORMS='SEVERESTORMS'；
常量映射=（{eventData，center，zoom}）=>{
const[locationInfo，setLocationInfo]=useState（null）；
常数风暴=事件数据。减少（（acc、ev、indx）=>{
常数几何=ev.geometry.map（（geo，geoIndx）=>(
setLocationInfo（{id:ev.id，title:ev.title}）}
/>
)
//将以前收集的记录与此迭代映射输出连接起来
acc=acc.concat（几何）
返回acc
}, [])
返回(
{风暴}
{locationInfo&&}
);
};
Map.defaultProps={
中心：{
拉脱维亚：42.3265，
液化天然气：-122.8756，
},
缩放：4，
};
导出默认地图；

您必须在数组中添加所有LocationMarker，然后返回数组

现在要做的是遍历循环，然后在第一个索引（i=0）上返回

<LocationMarker
        lat={ev.geometry[i].coordinates[1]}
        lng={ev.geometry[i].coordinates[0]}
        type='severeStorms'
        onClick={() => setLocationInfo({ id: ev.id, title: ev.title })}
      />

setLocationInfo（{id:ev.id，title:ev.title}）
/>

从风暴功能