当我有一个唯一键时，我收到一个唯一键道具警告

Question

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

下面我有一个项目组件：

class Item extends Component {
    state = {}

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

下面是我的项目组件以及我有唯一键的地方：

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

有了这一切，我收到了警告！

Answer 1

正如其他人所说，您需要key在顶部元素上设置，在您的情况下是Fragment. 但我会改变键值。我不知道你有什么样的数据，item.todo但只是将键设置为值item.todo可能会有问题。我会解释。

一个键应该只在它的兄弟中是唯一的

关于列表和键的 react.org 文档完美地总结了这一点，所以我不会以其他方式解释。下面是这么说的。

数组中使用的键在其同级中应该是唯一的。但是，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键：

（注意：它不需要是有意义的数据）。

密钥应该是稳定的

这意味着，之间呈现的关键不应该改变，所以不要使用Math.random()这一些人认为将是很好的使用。

为什么上述很重要？

在您的数据中，如果两个items.todo值相同，则会破坏上述内容。您的密钥不会是唯一的。这可能会导致不必要的重新渲染导致性能问题。

我建议使用具有地图的items.todo和值的键index。这样，如果您确实具有items.todo添加索引的相同值，则会使键唯一。考虑到这一点，我会写下你的片段。

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 文档的链接。两者都提供了示例和有用的信息。它们很好读，我强烈推荐。

我还注意到，您正在使用，React.Fragment但随后您仅使用Component. 你可以做我假设你已经做过的事情Component并解构Fragement. 像下面这样：

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

所以你的代码片段更干净一点，如下所示：

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