Я установил компонент карты листовки, который перебирает пользователей, извлеченных из базы данных, которая содержит для каждого из них координаты. Девтул кидай мне:
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>
Ошибка, кажется, находится в @Gelocalisation.jsx (моя компоновка всей страницы), строка: 102, где я устанавливаю стиль и панель навигации в зависимости от клиентского устройства.
return ( <--- here l:102
<>
{!isMobile ? (
[
<BrowserSidenav />,
<style>
{browserLeafletContainer}
</style>
]
) : (
<style>
{mobileLeafletContainer}
</style>
)}
Кто-нибудь знает, как это исправить? (P.S: извините за плохой английский, не родной и не пользуюсь онлайн-переводчиком)
Полный возврат от моего компонента 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>
</>
)
Я знаю, но я также управляю контактами в другом компоненте своего приложения с помощью операций C U D. Кто-то сказал мне использовать индекс только тогда, когда объекты моего списка статичны (это приложение с несколькими учетными записями, поэтому, если кто-то редактирует список контактов, пока я нахожусь на моем компоненте карты, это может привести к конфликту?) Я использую электронную почту, которая является уникальным значением в db; / редактировать: весь компонент карты извлекается только после автоматического обновления, поэтому индекс должен работать, потому что он переупорядочивает индексы при каждом обновлении веб-браузера. Я пытался, и это не исправляет мой pb: imgur.com/kWgOi7b
Проверьте, есть ли одинаковые электронные письма в данных «контакты». Убедитесь, что каждый ключ для div уникален.
электронная почта является уникальным значением в db
проверьте concats в консоли, когда появится предупреждение. это помогает локализовать проблему. Если он уникален, вы можете удалить каждую подозрительную часть в своих кодах одну за другой, чтобы увидеть, исчезнет ли предупреждение или нет.
сори, это опечатка. 'contacts.map(contact => ( <div key = {contact.email}> ...' это в вашем коде, данные 'contacts', просто используйте 'console.info(contacts)' для проверки в консоли браузера , проверьте уникальность значения поля электронной почты.
сделано на картинке, которую я дал вам в верхнем ответе --> imgur.com/v07zqy7 :/ они все разные
тогда [ <BrowserSidenav />, <style> {browserLeafletContainer} </style> ]
может быть проблема, попробуй <React.Fragment><BrowserSidenav /> <style> {browserLeafletContainer} </style></React.Fragment>
Хорошо, это исправлено, но знаю, что фрагмент ломает мой css x) Спасибо вам, :D
нормально, перерыв в css произошел из-за «,» после SideBar, когда он отображался как массив, а не как фрагмент. Символ "," выдвигает элемент встроенного блока фрагмента. Я удалил его, и теперь он чист от ошибок и разрыва css. ты крут спасибо :)
.map
также предоставляет индекс, например:contacts.map((contact,index) => (
, этот индекс всегда будет уникальным, попробуйте