拥有唯一钥匙时，我会收到一个唯一的钥匙道具警告 [英] I am getting a unique key prop warning when i have a unique key

问题描述

我是React的新手，但我知道唯一密钥的主要概念.但是，我收到警告.

I am new to React but I know main concept of unique key. However, I am getting a warning.

下面我有一个项目组件:

Below I have an item component:

class Item extends Component {
    state = {}

    render() { 
        return ( 
            <React.Fragment>
                {this.props.item.todo}
            </React.Fragment>
        );
    }
}

下面是我的项目组件，其中有唯一的键:

And below is my items component and where i have unique keys:

render() { 
    const { items } = this.props;
    return ( 
        items.map(item=>
            <React.Fragment>
                <Item key={item.todo} item={item} />
            </React.Fragment>
        )    
    );
}

所有这些我都得到警告！

With all of this I am getting warning!

推荐答案

就像其他人所说的那样，您需要在顶部元素上设置key，在本例中为Fragment.但是我会更改键值.我不知道您在item.todo中拥有什么样的数据，但是仅将键设置为item.todo的值可能会出现问题.我会解释.

As others have said you need to set the key on the top element, in your case being Fragment. But I would change the key value. I don't know what kind of data you have in your item.todo but just setting the key to the value of item.todo could be problematic. I will explain.

密钥应仅在其兄弟姐妹之间是唯一的

列表和键上的react.org文档完美地总结了这一点，因此我将不作其他解释.它在下面说.

The react.org document on lists and keys sums this up perfectly, so I won't explain in another way. It says this below.

在数组中使用的键在同级之间应该是唯一的.但是，它们不必在全球范围内都是唯一的.当我们产生两个不同的数组时，我们可以使用相同的键:

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

(注意:它不一定是有意义的数据).

(Note: it does not need to be meaningful data).

密钥应稳定

这意味着在渲染之间不应更改键，因此请不要使用Math.random()人们认为会很好使用的 some .

This means that between renders the key should not change, so don't use Math.random() which some people think would be good to use.

为什么上述重要?

在您的数据中，如果两个items.todo是相同的值，则将破坏上面的值.您的密钥不是唯一的.可能由于不必要的重新渲染而导致性能问题.

In your data, if two items.todo are the same value then it would break the above. Your key would not be unique. Which could cause performance issues from unnecessary re-renders.

我建议使用键，该键的值应为地图的items.todo和index.这样，如果您确实为items.todo提供了相同的值，则添加索引将使键唯一.考虑到这一点，我会写你的代码段.

I would recommend using a key with the value of the items.todo and the index of the map. This way if you do have the same value for items.todo adding an index would make the key unique. With this in mind I would write your snippet.

render() { 
  const { items } = this.props;

  return ( 
    items.map((item, index) => (
      <React.Fragment key={item.todo + index}>
        <Item item={item} />
      </React.Fragment>
    ))
  );
}

此处是列表和键上的react.org文档的链接.并且是有关片段的react.org文档的链接.两者都提供示例和有用的信息.他们是一本好书，我强烈建议.

Here is link to the react.org documentation on list and keys and is a link to the react.org documentation regarding fragments. Both provide examples and useful information. They are a good read and I would highly recommend.

我还注意到您正在使用React.Fragment，但是随后仅使用Component声明了您的类.您可以按照我假设为Component所做的事情做，然后破坏Fragement的结构.如下所示:

Also something I noticed is that you're using React.Fragment but then you declare your class with just Component. Your could do what I'm assuming you've done for Component and destructure the Fragement. Something like below:

import React, { Component, Fragment } from 'react';

所以您的代码段更干净了，如下所示:

So you're snippet is a bit more clean, like below:

items.map((item, index) => (
  <Fragment key={item.todo + index}>
    <Item item={item} />
  <Fragment>
))

这篇关于拥有唯一钥匙时，我会收到一个唯一的钥匙道具警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！