react-leaflet嵌套.map()调用时无法创建Marker组件问题

你嵌套遍历二维数组时，内层data.data.map()返回的Marker组件根本没被React识别到，所以不会渲染。原因很明确：外层的noneSirialSatInfo.map()里，你执行完内层map后直接返回了<Marker position={[0,0]}/>，完全没把内层map的结果返回出去。

修正方案1：只渲染内层数组的Marker #

如果不需要[0,0]位置的Marker，直接返回内层map的结果即可，记得给每个Marker加唯一key：

{!UseSerial && SatLineView && noneSirialSatInfo.map((data) => {
  return data.data.map((info) => {
    console.log(info.lat, info.lng)
    // 用info的唯一标识（比如id）作为key
    return <Marker key={info.id} position={[info.lat, info.lng]}/>
  })
})}

修正方案2：同时渲染内层Marker和外层的Marker #

如果需要保留[0,0]的Marker，要把内层map的结果和它放在同一个容器（比如React.Fragment）里，同时给外层循环元素加key：

{!UseSerial && SatLineView && noneSirialSatInfo.map((data, outerIdx) => {
  return (
    <React.Fragment key={outerIdx}>
      {data.data.map((info) => {
        console.log(info.lat, info.lng)
        return <Marker key={info.id} position={[info.lat, info.lng]}/>
      })}
      <Marker key={`outer-marker-${outerIdx}`} position={[0,0]}/>
    </React.Fragment>
  )
})}

关键注意点 #

• 所有循环生成的React组件，必须添加唯一的key属性，这是React追踪组件状态的必要条件，避免渲染混乱。
• 内层遍历的返回值必须被外层函数返回，否则React无法识别这些待渲染的元素。

内容的提问来源于stack exchange，提问作者kimjaku