反应索引键在地图中不起作用

Question

I have used index key but it's still showing errors. Also tried with unique id from JSON data but can't solve this.

ERROR

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

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

Answer 1

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

You will get this warning only when two or more items in the list have been supplied with the same key , Your code looks fine for me, it shouldn't be giving this warning , please try with a console.log(index) inside the map .

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

Anti Pattern:

You should not be using index of the map for you Key , its an antipattern, it may lead to unpredictable results.

Please check this https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

You should be using proper unique-id for your Key , like a DB id or some unique-id.

This Key is used internally to identify the DOM elements to render and not to render again.

Answer 2

您必须使用ID，非重复名称（或您使用的唯一名称），但要使用其索引，因为它通过其key：value对比较VDOM。

Answer 3

In retrospect to other answers quoting that you should not use array index as a key, as much as it is an antipattern, it will still resolve the warning.

What you're doing is right and should remove the warning. Although I suspect the warning is coming when you iterate again over the result of your faqdata .

Every time you render something from an array, each entry should have the key attribute.