时间戳

首页 > 解决方案 > 当我有唯一键时，我会收到唯一键道具警告

javascript - 当我有唯一键时，我会收到唯一键道具警告

问题描述

我是 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>
        )    
    );
}

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

标签： javascripthtmlreactjsreactive-programming

解决方案

正如其他人所说，您需要设置key顶部元素，在您的情况下是Fragment. 但我会改变键值。我不知道你有什么样的数据，item.todo但只是将键设置为 valueitem.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>
    ))
  );
}

这是关于list 和 keys的 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>
))

推荐阅读