警告：列表中的每个子元素应具有唯一的“key”属性。

13 浏览
0 Comments

警告：列表中的每个子元素应具有唯一的“key”属性。

我正在使用Google图书API构建一个应用程序，我似乎给列表中的每个子项传递了一个唯一的键，但错误却没有消失。我一定做错了什么，但我不确定是什么。

请注意，在const books返回后，我有一个console.log(book.id)，它将在控制台中显示所有10个唯一的id键。但是当我尝试使用key={book.id}将其传递给该组件的子项时，我会收到这个错误。

0

2 答案

0 Comments

问题的原因是在使用React的map()函数遍历数组时，没有为列表中的每个子元素提供一个唯一的"key"属性。这会导致React在渲染时无法准确地识别和跟踪每个子元素的变化，从而产生警告。

解决方法是为每个子元素提供一个唯一的"key"属性。在上述示例中，问题出现在两个组件中，它们使用了相同的employee.id作为"key"属性。为了解决这个问题，可以使用React提供的更完整的语法形式，即使用组件，并为它提供一个唯一的"key"属性。

通过将外层的组件的"key"属性设置为employee.id，可以解决警告问题。修改后的代码如下：


  
{employee.department}

通过提供唯一的"key"属性，React可以正确地识别和跟踪每个子元素的变化，消除了警告。

0
0 Comments

在React中，当我们在使用列表渲染时，每个子元素都应该有一个唯一的"key"属性。如果不提供这个属性，React会报出一个警告，即"Warning: Each child in a list should have a unique 'key' prop"。

为什么需要给每个子元素提供一个唯一的"key"属性呢？原因是，React在处理列表时，只会直接查看列表中的元素，而不会递归地查找子元素中是否存在"key"属性。如果React递归地查找并处理"key"属性，这样做既会降低性能，又会在存在嵌套数组时引起歧义。

解决这个问题的方法很简单，只需要将"key"属性放在最外层的返回元素上即可。具体来说，将"key"属性从组件内部的DOM元素上移动到最外层的div元素上。

这个问题也可能在自定义组件中出现。如果在列表中使用了自定义组件，那么"key"属性应该放在组件本身的props上，而不是组件返回的DOM元素上。

在React文档中有相关的内容可以参考。具体来说，可以参考"reactjs.org/docs/lists-and-keys.html"和"reactjs.org/docs/reconciliation.html"。

总结起来，当在React中使用列表渲染时，每个子元素都应该有一个唯一的"key"属性。这样做有助于React在处理列表时进行有效的渲染和更新。

0