React JS：警告：数组或迭代器中的每个子节点都应该有一个唯一的“key”prop

Question

我在学习ReactJs时遇到了一些麻烦。我一直有这个警告：

  

警告：数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。

失败的是我在这段代码中为每个元素提供了一个唯一的密钥：

let tab = props.todos.map((t) => {return <TodoListItem key={t.id} todo={t} onRemove={props.onRemove} /> })

我的TodoListItems是<li>个元素，我还尝试给他们一个密钥，然后我将{t.id}的存在和值作为一个密钥进行测试，然后就可以了。我还在每次执行之前清除了缓存。

我没有解决方案，这就是我要求你帮助的原因。

提前谢谢。

Answer 1

强制执行唯一键的最安全方法是使用map函数的index参数。

let tab = props.todos.map((t, index) => {return <TodoListItem key={index} todo={t} onRemove={props.onRemove} /> })

如果您真的想使用t.id作为密钥，我建议暂时更改您的代码以使用索引（按照上面的代码段），但在您呈现的标记中转储t.id以验证您的ID是事实上，它是独一无二的。