Листовка React: ugly Предупреждение: каждый дочерний элемент в списке должен иметь уникальную «ключевую» опору

Я установил компонент карты листовки, который перебирает пользователей, извлеченных из базы данных, которая содержит для каждого из них координаты. Девтул кидай мне:

Warning: Each child in a list should have a unique "key" prop.

Не в первый раз я получаю это предупреждение, и обычно я легко нахожу, как это исправить, но на этот раз я не могу найти решение.

Все работает нормально, но это предупреждение продолжает вызывать у меня

Предупреждение консоли: Листовка React: ugly Предупреждение: каждый дочерний элемент в списке должен иметь уникальную «ключевую» опору

Я попытался поместить ключ как идентификатор компонента маркера, идентификатор компонента всплывающего окна, оба из них.

Я видел сообщение, в котором рекомендуется поместить ключ в качестве идентификатора фрагмента для каждого элемента моей функции карты. Я пробовал в компоненте 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>

Ошибка, кажется, находится в @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='&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>
        </>
    )
.map также предоставляет индекс, например: contacts.map((contact,index) => (, этот индекс всегда будет уникальным, попробуйте
Code Ninja 17.05.2022 11:24

Я знаю, но я также управляю контактами в другом компоненте своего приложения с помощью операций C U D. Кто-то сказал мне использовать индекс только тогда, когда объекты моего списка статичны (это приложение с несколькими учетными записями, поэтому, если кто-то редактирует список контактов, пока я нахожусь на моем компоненте карты, это может привести к конфликту?) Я использую электронную почту, которая является уникальным значением в db; / редактировать: весь компонент карты извлекается только после автоматического обновления, поэтому индекс должен работать, потому что он переупорядочивает индексы при каждом обновлении веб-браузера. Я пытался, и это не исправляет мой pb: imgur.com/kWgOi7b

Beyond Mighto 17.05.2022 11:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проверьте, есть ли одинаковые электронные письма в данных «контакты». Убедитесь, что каждый ключ для div уникален.

электронная почта является уникальным значением в db

Beyond Mighto 17.05.2022 11:25

проверьте concats в консоли, когда появится предупреждение. это помогает локализовать проблему. Если он уникален, вы можете удалить каждую подозрительную часть в своих кодах одну за другой, чтобы увидеть, исчезнет ли предупреждение или нет.

Taurz 17.05.2022 11:37
imgur.com/v07zqy7 ? какие конкаты? я не объединяю электронные письма, я использую значение строки базы данных в качестве ключа, без редактирования (я новичок в реагировании и js, поэтому я действительно не знаю, как правильно обрабатывать ошибки, мне часто трудно вызвать, где находится реальная пб)
Beyond Mighto 17.05.2022 11:43

сори, это опечатка. 'contacts.map(contact => ( <div key = {contact.email}> ...' это в вашем коде, данные 'contacts', просто используйте 'console.info(contacts)' для проверки в консоли браузера , проверьте уникальность значения поля электронной почты.

Taurz 17.05.2022 11:48

сделано на картинке, которую я дал вам в верхнем ответе --> imgur.com/v07zqy7 :/ они все разные

Beyond Mighto 17.05.2022 11:53

тогда [ <BrowserSidenav />, <style> {browserLeafletContainer} </style> ] может быть проблема, попробуй <React.Fragment><BrowserSidenav /> <style> {browserLeafletContainer} </style></React.Fragment>

Taurz 17.05.2022 11:58

Хорошо, это исправлено, но знаю, что фрагмент ломает мой css x) Спасибо вам, :D

Beyond Mighto 17.05.2022 12:04

нормально, перерыв в css произошел из-за «,» после SideBar, когда он отображался как массив, а не как фрагмент. Символ "," выдвигает элемент встроенного блока фрагмента. Я удалил его, и теперь он чист от ошибок и разрыва css. ты крут спасибо :)

Beyond Mighto 17.05.2022 12:14

Другие вопросы по теме