React Leaflet:丑陋的警告:列表中的每个 child 都应该有一个唯一的 "key" 道具
React Leaflet : ugly Warning: Each child in a list should have a unique "key" prop
我已经设置了一个传单地图组件,它遍历从数据库中获取的用户,其中每个用户都包含坐标。
Devtool 扔给我:
Warning: Each child in a list should have a unique "key" prop.
我不是第一次收到此警告,我通常很容易找到解决方法,但这次我找不到解决方案。
一切正常,但这个警告一直在触发我
控制台警告:
我试过把key设置为Marker组件标识符,Popup组件标识符,两者都是。
我看到 post 建议将键作为我的映射函数的每个元素的片段标识符。我尝试了 div 组件(对我来说似乎等于 Fragment?)仍然无法正常工作。
<MapContainer id={!isMobile ? "browser-leaflet" : "mobile-leaflet"} center={POSITION} zoom={15} scrollWheelZoom={true}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr"
/>
{contacts.map(contact => (
<div key={contact.email}> <-- last try here
<Marker //also tried here// position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}>
<Popup //also tried here// offset={[0, -15]}>
<p style={{marginBottom: "1vh", textAlign: "center", fontSize: "1.5em"}}>
{contact.raison_sociale}
</p>
<Button variant="sub" className="mx-auto" style={{border: "teal", borderRadius: "15px", fontSize: "1em", display: "flex", justifyContent: "center"}}>
<a
href={"https://www.waze.com/fr/live-map/directions?navigate=yes&to=ll." + contact.lat + "%2C" + contact.lon}
style={{textDecoration: "none", color: "black", backgroundColor: "#D0FCB3"}}
>
Allez-y
</a>
</Button>
</Popup>
</Marker>
</div>
))}
<SetMap />
</MapContainer>
错误似乎位于@Geolocalisation.jsx(我的整个页面组合)line:102,这是我根据客户端设备设置样式和导航栏的地方。
return ( <--- here l:102
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
有人知道如何解决吗?
(P.S:抱歉英语不好,不是母语也没有使用在线翻译)
我的组件 Geolocalisation.jsx 中的整个 return :(函数只是一个用户获取,一个删除没有 lat/lon 的用户的 useEffect。
return (
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
<MapContainer id={!isMobile ? "browser-leaflet" : "mobile-leaflet"} center={POSITION} zoom={15} scrollWheelZoom={true}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr"
/>
{contacts.map(contact => (
<div key={contact.email}>
<Marker position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}>
<Popup offset={[0, -15]}>
<p style={{marginBottom: "1vh", textAlign: "center", fontSize: "1.5em"}}>
{contact.raison_sociale}
</p>
<Button variant="sub" className="mx-auto" style={{border: "teal", borderRadius: "15px", fontSize: "1em", display: "flex", justifyContent: "center"}}>
<a
href={"https://www.waze.com/fr/live-map/directions?navigate=yes&to=ll." + contact.lat + "%2C" + contact.lon}
style={{textDecoration: "none", color: "black", backgroundColor: "#D0FCB3"}}
>
Allez-y
</a>
</Button>
</Popup>
</Marker>
</div>
))}
<SetMap />
</MapContainer>
</>
)
检查数据'contacts'中是否有相同的邮件。确保 div 的每个键都是唯一的。
我已经设置了一个传单地图组件,它遍历从数据库中获取的用户,其中每个用户都包含坐标。 Devtool 扔给我:
Warning: Each child in a list should have a unique "key" prop.
我不是第一次收到此警告,我通常很容易找到解决方法,但这次我找不到解决方案。
一切正常,但这个警告一直在触发我
控制台警告:
我试过把key设置为Marker组件标识符,Popup组件标识符,两者都是。
我看到 post 建议将键作为我的映射函数的每个元素的片段标识符。我尝试了 div 组件(对我来说似乎等于 Fragment?)仍然无法正常工作。
<MapContainer id={!isMobile ? "browser-leaflet" : "mobile-leaflet"} center={POSITION} zoom={15} scrollWheelZoom={true}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr"
/>
{contacts.map(contact => (
<div key={contact.email}> <-- last try here
<Marker //also tried here// position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}>
<Popup //also tried here// offset={[0, -15]}>
<p style={{marginBottom: "1vh", textAlign: "center", fontSize: "1.5em"}}>
{contact.raison_sociale}
</p>
<Button variant="sub" className="mx-auto" style={{border: "teal", borderRadius: "15px", fontSize: "1em", display: "flex", justifyContent: "center"}}>
<a
href={"https://www.waze.com/fr/live-map/directions?navigate=yes&to=ll." + contact.lat + "%2C" + contact.lon}
style={{textDecoration: "none", color: "black", backgroundColor: "#D0FCB3"}}
>
Allez-y
</a>
</Button>
</Popup>
</Marker>
</div>
))}
<SetMap />
</MapContainer>
错误似乎位于@Geolocalisation.jsx(我的整个页面组合)line:102,这是我根据客户端设备设置样式和导航栏的地方。
return ( <--- here l:102
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
有人知道如何解决吗? (P.S:抱歉英语不好,不是母语也没有使用在线翻译)
我的组件 Geolocalisation.jsx 中的整个 return :(函数只是一个用户获取,一个删除没有 lat/lon 的用户的 useEffect。
return (
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
<MapContainer id={!isMobile ? "browser-leaflet" : "mobile-leaflet"} center={POSITION} zoom={15} scrollWheelZoom={true}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr"
/>
{contacts.map(contact => (
<div key={contact.email}>
<Marker position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}>
<Popup offset={[0, -15]}>
<p style={{marginBottom: "1vh", textAlign: "center", fontSize: "1.5em"}}>
{contact.raison_sociale}
</p>
<Button variant="sub" className="mx-auto" style={{border: "teal", borderRadius: "15px", fontSize: "1em", display: "flex", justifyContent: "center"}}>
<a
href={"https://www.waze.com/fr/live-map/directions?navigate=yes&to=ll." + contact.lat + "%2C" + contact.lon}
style={{textDecoration: "none", color: "black", backgroundColor: "#D0FCB3"}}
>
Allez-y
</a>
</Button>
</Popup>
</Marker>
</div>
))}
<SetMap />
</MapContainer>
</>
)
检查数据'contacts'中是否有相同的邮件。确保 div 的每个键都是唯一的。