如何解决映射数组时不能在 <Marker> 中使用 <Popup/> [React Leaflet]
我正在尝试映射一个数组,其中我使用了 React Leaflet 中的标记组件。如果我只使用 Marker 组件一切正常,但如果在标记组件内部我使用 Popup 组件,我会收到此错误。
类型错误:无法读取未定义的属性“初始化”
const Location = () => {
const [shops,setShops] = useState([]);
useEffect(() => {
const fetchShops = async () => {
const fetchedShops = await getShops();
console.log(fetchedShops);
setShops(fetchedShops);
};
fetchShops();
},[]);
return (
<MapContainer
center={[27.8617,-101.1255]}
zoom={15}
scrollWheelZoom={true}
style={{ height: "100vh" }}
zoomAnimation={true}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{shops?.map((shop) => (
<Marker position={shop?.location}>
// If i remove this all work fine
<Popup>Hola mundo</Popup>
</Marker>
))}
</MapContainer>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。