ReactLeaflet：丑陋警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具

我設定了一個傳單地圖組件，它遍歷從資料庫中獲取的用戶，其中每個用戶都包含坐標。Devtool throw me：警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具。我不是第一次收到此警告，我通常很容易找到解決方法，但這次我找不到解決方案。

一切正常，但這個警告一直在觸發我：/

控制臺警告

我嘗試將鍵作為標記組件識別符號、彈出組件識別符號，兩者都是。

我看過一篇文章，建議將鍵作為我的地圖函式的每個元素的片段識別符號。我嘗試了一個 div 組件（對我來說似乎等于 Fragment ？？）仍然無法正常作業。

<MapContainer  id={!isMobile ? "browser-leaflet" : "mobile-leaflet"} center={POSITION} zoom={15} scrollWheelZoom={true}>
    <TileLayer
    attribution='&copy; <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='&copy; <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>
        </>
    )

uj5u.com熱心網友回復：

檢查資料“聯系人”中是否有相同的電子郵件。確保 div 的每個鍵都是唯一的。

標籤：javascript 反应 反应传单 叶子

上一篇：頁面重新加載后加載垂直側邊欄的存盤寬度位置

下一篇：表過濾器/搜索兩列