[英]React Leaflet : ugly Warning: Each child in a list should have a unique "key" prop
我設置了一個傳單地圖組件,它遍歷從數據庫中獲取的用戶,其中每個用戶都包含坐標。 開發工具扔給我:
警告:列表中的每個孩子都應該有一個唯一的“關鍵”道具。
我不是第一次收到此警告,我通常很容易找到解決方法,但這次我找不到解決方案。
一切正常,但這個警告一直在觸發我
我嘗試將鍵作為標記組件標識符、彈出組件標識符,兩者都是。
我看過一篇文章,建議將鍵作為我的地圖函數的每個元素的片段標識符。 我嘗試了一個 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(我的整個頁面組合)行:102,這是我根據客戶端設備設置樣式和導航欄的地方。
return ( <--- here l:102
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
有人知道如何解決嗎? (PS:抱歉英語不好,不是母語,也沒有使用在線翻譯)
我的組件 Geolocalisation.jsx 的全部返回:(funcs 只是一個用戶獲取,一個 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>
</>
)
檢查數據“聯系人”中是否有相同的電子郵件。 確保 div 的每個鍵都是唯一的。
請記住,未定義也是一個鍵值。
如果您的數據庫中有獨特的電子郵件,但不是必需的,那么可能有幾個人沒有電子郵件。
我通常使用 _id/id 或 concider 使用多個字段來構建密鑰。 你也可以做 key={contact.email ?? contact.phone} 或其他屬性,如果電子郵件未定義...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.