在 react-leaflet 中的 .map() 中使用 .map() 时不会创建 UI

Question

使用 react-leaflet 库，我尝试通过调用一个数组中的数组来创建每个 maker。 在这个过程中，我们尝试了两次使用array using .map()中数组的数据。 通过 console.log() 确认数据，但实际上没有生成标记。 确认使用一次 A 时创建了标记。 我不知道为什么会这样。

{UseSerial && SatLineView && sirialSatInfo.map((info) => {
                    return < View_range key={info.id}
                        position={[info.lat, info.lng]}
                        state={info.range}
                        id={info.id}
                        eventHandlers={{ click: () => View_Satellite_range(info.id) }}
                    />
                })}

上面的例子Marker很帅，他写了一次.map()。

{!UseSerial && SatLineView && noneSirialSatInfo.map((data) => {
                    data.data.map((info) => {
                        console.log(info.lat, info.lng)
                        return <Marker position={[30,0]}/>
                    })
                    return <Marker position={[0,0]}/>
                })}

但是，如果 .map() 如上所述使用了两次，则不会创建标记。

Answer 1

map 返回一个数组，在你的例子中你不对这个新数组做任何事情。

noneSirialSatInfo.map((data) => {
  return data.data.map((info) => {
    return <Marker position={[info.lat, info.lng]} />;
  });
});