Индексный ключ React не работает на карте

Question

Я использовал index ключ, но он все еще показывает ошибки.Также пытался с уникальным идентификатором из данных JSON, но не может решить эту проблему.

ОШИБКА

Предупреждение. У каждого дочернего элемента в списке должна быть уникальная "ключевая" опора.

const faqdata = this.props.faqData.map((faq, index) => (
    <li key={index}>
            {faq.description}
    </li>
));

Answer 1

Вы должны использовать идентификатор, не повторяющееся имя (или любое другое уникальное имя, которое вы называете), но его индекс, потому что он сравнивает VDOM по его ключам: пары значений

Answer 2

В ретроспективе к другим ответам, цитируя, что вы не должны использовать индекс массива в качестве ключа, поскольку он является антипаттерном, он все равно разрешит предупреждение.

То, что вы делаете, правильно и должноудалите предупреждение.Хотя я подозреваю, что появляется предупреждение, когда вы снова итерируете результат faqdata.

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

Answer 3

Предупреждение: У каждого ребенка в списке должна быть уникальная опора " key ".

Вы получите это предупреждение только тогда, когдадва или более элемента в списке снабжены одной и той же клавишей , ваш код выглядит нормально для меня, он не должен давать этот warning, пожалуйста попробуйте с console.log (index) внутриmap.

const faqdata = this.props.faqData.map((faq, index) => {
    console.log(index);
    <li key={index}>
            {faq.description}
    </li>
});

Anti Pattern:

Вы не должны использовать index карты для вас Ключ , это антипаттерн, он может привести к непредсказуемым результатам.

Пожалуйста, отметьте это https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Вы должны использовать правильный unique-id для вашего Ключ , например, Идентификатор БД или некоторый уникальный идентификатор.

Этот ключ используется для идентификации элементов DOM, которые нужно визуализировать, а не для повторной визуализации.