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

Question

我使用了index键，但仍显示错误。还尝试使用JSON数据中的唯一ID，但无法解决此问题。

错误

  

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

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

Answer 1

  

警告：：列表中的每个孩子都应该有一个唯一的“ 键”道具。

仅当列表中的两个或多个项目具有相同的键时，您才会收到此警告。您的代码对我来说很好，它不应该给出此{{1} }，请尝试在warning中使用console.log（index）。

map

  

反模式：

您不应该使用地图的索引来作为键的反模式， 可能会导致不可预测的结果。

请选中此https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

您应该为密钥使用正确的唯一ID ，例如 DB ID 或某些唯一ID。

此键在内部用于标识要渲染的DOM元素，而不是再次渲染。

Answer 2

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

Answer 3

回顾其他答案，引用您不应使用数组索引作为键，尽管它是一种反模式，它仍将解决警告。

您所做的是正确的，应该删除警告。尽管我怀疑当您再次遍历faqdata的结果时会发出警告。

每次从数组中渲染内容时，每个条目都应具有key属性。