«Каждый дочерний элемент в списке должен иметь уникальную ошибку опоры« ключ », несмотря на наличие ключа
У меня есть следующая ошибка, с которой я знаком:
Однако на этот раз я не понимаю, почему он здесь.
Вот мой код:
Chat.js
...
{
chats.map(chat => (
<div key = {chat._id} id = {chat._id}> // <--- line 200
<input
checked = {
chat._id === selectedChat?._id
}
id = "selectedChat"
name = "selectedChat"
onChange = {e => handleSelectChat(e)}
type = "radio"
value = {chat._id}
/>
<label htmlFor = "selectedChat">
{chat._id}
</label>
<button
onClick = {e => handleDeleteChat(e)}
type = "submit"
>
X
</button>
<br />
</div>
))
}
chat._id существует и работает по назначению, когда я проверяю html:
Примечание. На приведенном выше снимке экрана показано все количество идентификаторов (2).
Да, те, что вы видите на скриншоте, единственные 2, которые существуют.
что произойдет, если вы замените chat._id на index?
@DamianBusz я получаю ту же ошибку
Это действительно странно. Не могли бы вы создать коды и ящик для нас, чтобы мы могли воспроизвести этот выпуск?
@DamianBusz Я только что добавил коды и ящик
@DamianBusz Я понял, в чем проблема
@HugoBp да, это была проблема с выбраннымChat.messages.map, но хорошо, что вы поняли!
Ответы 2
{chats.map((chat, idx) => (
<div key = {idx} id = {chat._id}>
<input
checked = {chat._id === selectedChat?._id}
id = "selectedChat"
name = "selectedChat"
onChange = {(e) => handleSelectChat(e)}
type = "radio"
value = {chat._id}
/>
<label htmlFor = "selectedChat">{chat._id}</label>
<button onClick = {(e) => handleDeleteChat(e)} type = "submit">
X
</button>
<br />
</div>
))}
Попробуйте это, должно исправить.
Использование ключа для индекса является крайним средством и противоречит сути ключа: «Если у вас нет стабильных идентификаторов для отображаемых элементов, вы можете использовать индекс элемента в качестве ключа в качестве последнего средства» из ReactJS.org.
Это не работает, я получаю ту же ошибку. И даже если бы это было так, это не устраняет корень проблемы, поскольку я бы не хотел использовать индекс, поскольку я хочу иметь возможность динамически переупорядочивать элементы.
У меня есть другой .map() на странице с неправильным ключом (замена msg._id на msg.id исправила).
.map() из messages — это нет, вложенный в другой .map(), который был указан журналами ошибок в line 200, что сбивало с толку и затрудняло поиск источника проблемы.
{chats.map((chat, index) => (
<div key = {index} id = {index}> // <<< Logged error (line 200)
...
</div>
))}
<div style = {{background: "lightblue",maxHeight: "250px",overflow: "auto",}}>
{
...
selectedChat.messages.map(msg => (
<div key = {msg._id} ref = {scrollRef}> // <<< Actual error
...
</div>
))
}
</div>
Вы уверены, что каждый объект
._idуникален?