有很多方法可以创建unique keys，最简单的方法是在迭代数组时使用索引。

例子

    var lists = this.state.lists.map(function(list, index) {
        return(
            <div key={index}>
                <div key={list.name} id={list.name}>
                    <h2 key={"header"+list.name}>{list.name}</h2>
                    <ListForm update={lst.updateSaved} name={list.name}/>
                </div>
            </div>
        )
    });

无论您在哪里查看数据，在这里this.state.lists.map，您都可以将第二个参数传递function(list, index)给回调，这将是它的index值，并且对于数组中的所有项目都是唯一的。

然后你可以像这样使用它

<div key={index}>

你也可以在这里做同样的事情

    var savedLists = this.state.savedLists.map(function(list, index) {
        var list_data = list.data;
        list_data.map(function(data, index) {
            return (
                <li key={index}>{data}</li>
            )
        });
        return(
            <div key={index}>
                <h2>{list.name}</h2>
                <ul>
                    {list_data}
                </ul>
            </div>
        )
    });

编辑

但是，正如用户 Martin Dawson 在下面的评论中指出的那样，这并不总是理想的。

那么有什么解决办法呢？

许多

• 您可以创建一个函数来生成唯一的键/ID/数字/字符串并使用它
• 您可以使用现有的 npm 包，如uuid、uniqid等
• 您还可以生成随机数，new Date().getTime();并在其前面加上您正在迭代的项目中的某些内容以保证其唯一性
• 最后，我建议使用您从数据库中获得的唯一 ID，如果您获得了它。

例子：

const generateKey = (pre) => {
    return `${ pre }_${ new Date().getTime() }`;
}

const savedLists = this.state.savedLists.map( list => {
    const list_data = list.data.map( data => <li key={ generateKey(data) }>{ data }</li> );
    return(
        <div key={ generateKey(list.name) }>
            <h2>{ list.name }</h2>
            <ul>
                { list_data }
            </ul>
        </div>
    )
});

重要的是要记住，React 需要STABLE键，这意味着您应该分配一次键，并且列表中的每个项目每次都应该收到相同的键，这样 React 可以在协调虚拟 DOM 并决定时围绕您的数据更改进行优化哪些组件需要重新渲染。因此，如果您使用 UUID，则需要在数据级别而不是 UI 级别执行此操作。

还要记住，您可以使用任何您想要的字符串作为键，因此您通常可以将多个字段组合成一个唯一的 ID，例如，${username}_${timestamp}可以是聊天中某行的一个很好的唯一键。

Keys 帮助 React 识别哪些项目已更改/添加/删除，并且应该赋予数组内的元素以赋予元素一个稳定的身份。

考虑到这一点，基本上有以下三种不同的策略：

1. 静态元素（当您不需要保持 html 状态（焦点、光标位置等）时
2. 可编辑和可排序的元素
3. 可编辑但不可排序的元素

正如React 文档所解释的那样，我们需要为元素提供稳定的身份，因此，请仔细选择最适合您需求的策略：

静态元素

正如我们在 React 文档中也看到的，不建议对键使用索引“如果项目的顺序可能会改变。这会对性能产生负面影响，并可能导致组件状态问题”。

对于表格、列表等静态元素，我建议使用名为shortid的工具。

1) 使用 NPM/YARN 安装包：

npm install shortid --save

2）在要使用的类文件中导入：

import shortid from 'shortid';

2) 生成新 id 的命令是shortid.generate()。

3)例子：

  renderDropdownItems = (): React.ReactNode => {
    const { data, isDisabled } = this.props;
    const { selectedValue } = this.state;
    const dropdownItems: Array<React.ReactNode> = [];

    if (data) {
      data.forEach(item => {
        dropdownItems.push(
          <option value={item.value} key={shortid.generate()}>
            {item.text}
          </option>
        );
      });
    }

    return (
      <select
        value={selectedValue}
        onChange={this.onSelectedItemChanged}
        disabled={isDisabled}
      >
        {dropdownItems}
      </select>
    );
  };

重要提示：由于 React Virtual DOM 依赖于键，因此每次重新渲染元素时都会使用 shortid 创建一个新键，并且元素将失去它的 html 状态，如焦点或光标位置。在决定如何生成密钥时考虑这一点，因为上述策略仅在您构建的元素不会改变其值（如列表或只读字段）时才有用。

可编辑（可排序）字段

如果元素是可排序的，并且您有项目的唯一 ID，请将其与一些额外的字符串组合（以防您需要在页面中两次使用相同的信息）。这是最推荐的场景。

示例：

  renderDropdownItems = (): React.ReactNode => {
    const elementKey:string = 'ddownitem_'; 
    const { data, isDisabled } = this.props;
    const { selectedValue } = this.state;
    const dropdownItems: Array<React.ReactNode> = [];

    if (data) {
      data.forEach(item => {
        dropdownItems.push(
          <option value={item.value} key={${elementKey}${item.id}}>
            {item.text}
          </option>
        );
      });
    }

    return (
      <select
        value={selectedValue}
        onChange={this.onSelectedItemChanged}
        disabled={isDisabled}
      >
        {dropdownItems}
      </select>
    );
  };

可编辑（不可排序）字段（例如输入元素）

作为最后的手段，对于像输入这样的可编辑（但不可排序）字段，您可以使用一些索引和一些起始文本，因为元素键不能重复。

示例：

  renderDropdownItems = (): React.ReactNode => {
    const elementKey:string = 'ddownitem_'; 
    const { data, isDisabled } = this.props;
    const { selectedValue } = this.state;
    const dropdownItems: Array<React.ReactNode> = [];

    if (data) {
      data.forEach((item:any index:number) => {
        dropdownItems.push(
          <option value={item.value} key={${elementKey}${index}}>
            {item.text}
          </option>
        );
      });
    }

    return (
      <select
        value={selectedValue}
        onChange={this.onSelectedItemChanged}
        disabled={isDisabled}
      >
        {dropdownItems}
      </select>
    );
  };

希望这可以帮助。

不要使用这个return `${ pre }_${ new Date().getTime()}`;。最好使用数组索引而不是它，因为即使它并不理想，这样您至少会在列表组件之间获得一些一致性，使用新的 Date 函数，您将获得持续的不一致。这意味着函数的每一次新迭代都会产生一个新的真正唯一的键。

唯一键并不意味着它需要是全局唯一的，它意味着它需要在组件的上下文中是唯一的，因此它不会一直运行无用的重新渲染。一开始你不会感觉到与 new Date 相关的问题，但是你会感觉到，例如，如果你需要回到已经渲染的列表并且 React 开始变得很困惑，因为它不知道哪个组件发生了变化，哪个组件发生了变化没有，导致内存泄漏，因为，你猜对了，根据你的 Date 键，每个组件都改变了。

现在我的回答。假设您正在呈现 YouTube 视频列表。使用视频 ID (arqTu9Ay4Ig) 作为唯一 ID。这样，如果 ID 没有改变，组件将保持不变，但如果改变，React 会识别它是一个新的 Video 并相应地更改它。

不必那么严格，稍微宽松一点的变体是使用标题，就像 Erez Hochman 已经指出的那样，或者是组件属性的组合（标题加类别），这样你就可以告诉 React 检查如果他们改变了。

编辑了一些不重要的东西

让 React 为孩子分配键

你可以利用React.Children API：

const { Children } = React;

const DATA = [
  'foo',
  'bar',
  'baz',
];

const MyComponent = () => (
  <div>
    {Children.toArray(DATA.map(data => <p>{data}</p>))}
  </div>
);


ReactDOM.render(<MyComponent />,document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>