多个标记不会在React传单地图中呈现

Question

我使用react-传单显示使用axios从MongoDB获取的具有特定lat和lng的多个标记。我可以通过console.log看到我的数据是正确的。但是，当我映射locationData时，标记没有出现。

这是我的代码。

const LeafletMap = () => {
const classes = useStyles();
const [locationData, setLocationData] = useState([]);
useEffect(() => {
location.getAll().then(res => {
setLocationData(res.data);
})
});
return(
<MapContainer className={classes.mapPane} center={[16.831374910711716, 96.15512062779219]} zoom={13} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{
locationData.map(({_id, name, location, type}) => {
<Marker position={[location.lat, location.long]} key={_id}> 
</Marker>
})
}
</MapContainer>
)
}

下面是我从数据库中获取的样本数据。

{
"name": "University of Sheffield",
"location": {
"lat": 53.38208784924988,
"long": -1.4888865317372872,
"city": "Sheffield"
},
"type": "University"
}

Answer 1

尝试使用return。下面的代码为我工作:

locationData.map((data) => {
return (
<Marker position={[data.lat, data.lng]}>
<Tooltip><b>{data.location}</b></Tooltip>
</Marker>
)
})