反应传单：丑陋的警告：列表中的每个孩子都应具有独特的“钥匙”。支柱

Question

我已经设置了一个传单映射组件，该组件通过从DB中获取的用户迭代，其中包含每个DB的坐标。 DevTool抛弃我：

警告：列表中的每个孩子都应具有唯一的“密钥”道具。

不是我第一次发出警告，通常会很容易找到如何修复它，但是这次我找不到解决方案。

一切都很好，但是此警告不断引发我的

控制台警告：

我试图将密钥作为标记组件标识符，弹出组件标识符，两者都放置。

我已经看到一篇建议将密钥作为我地图功能的每个元素的片段标识符。我在DIV组件中尝试过（对我来说似乎等于碎片吗？）仍然无法使用。

<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（我的整个页面compo）行：102我基于客户端设备设置样式和Navbar的地方。

return ( <--- here l:102
        <>
            {!isMobile ? (
                [
                    <BrowserSidenav />, 
                    <style>
                        {browserLeafletContainer}
                    </style>
                ]
            ) : (
                <style>
                    {mobileLeafletContainer}
                </style>
            )}

有人知道如何解决吗？ （PS：对不起，英语不好，不是本地的，不使用在线翻译）

我的组件Geolocalisation.jsx ：（ funcs只是一个用户获取，它是一种删除没有LAT/LON的用户的使用效果。

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>
        </>
    )

Answer 1

检查数据“联系人”中是否有相同的电子邮件。确保DIV的每个键都是唯一的。

Answer 2

请记住，未定义也是一个钥匙值。

如果您的数据库中有独特的电子邮件，但不需要，那么可能没有电子邮件的人。

通常，我使用多个字段来构建密钥。
您也可以执行键= {Contact.Email ?? contact.phone}或其他属性，如果电子邮件不确定...