当您没有项目的明确唯一属性（非唯一基元列表）时，您可以使用索引。

注意：如果项目具有唯一性id（并且非原始列表应该），则不要使用索引，因为它是反模式。

const Numbers = ['2', '4', '4', '8'];

const NumbersList = (props) => (
  <ul>
  {
  props.Numbers.map (
    (number, index) => <li key={index}>{number * 2}</li>
  )}
  </ul>
)

ReactDOM.render(
  <NumbersList Numbers = {Numbers} />,
  document.getElementById('root')
)

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

原因是每个<li>标签都应该有一个唯一的键。要指定key=4在<li>标签的元件4是你的阵列式两份。

编辑后

我的不好，我没有阅读完整的问题。使用 uuid 包生成新 id：https : //www.npmjs.com/package/uuid他们也有文档。

这样做会添加唯一键以及自定义数据

import React from 'react';
import ReactDOM from 'react-dom';


const Numbers = ['2', '4', '6', '8'];

const NumbersList = (props) => (
   <ul>
      {
          props.Numbers.map (
             (number, i) => <li key={i} custom={number}>{number * 2}</li>
          )
      }
    </ul>
)
ReactDOM.render(<NumbersList Numbers = {Numbers} />, document.getElementById('root') )

关键props应该是唯一的，所以我给出了 map 方法的返回值，自定义属性将是您要为所有元素设置的数组数据。

React 期望重复项（兄弟姐妹）具有一个关键属性，以便它可以区分后续渲染中的项。这允许它在项目来时、去处和更改时优化元素图的渲染。

key本来是一个字符串，但 React 会为你强制将一个数字转换为字符串。您的示例非常简单，数据包含一些唯一的项目值（例如数据库记录 ID）更正常，这样可以支持重复的属性，但仍允许区分项目。在没有外部 id 属性的情况下，您可以决定添加唯一标识符作为状态的一部分。

可以使用列表中的项目索引，但这并不总是允许 React 优化项目的渲染周期。这就是为什么不鼓励您的数据包含唯一项目标识符的原因。

React 检查重复和丢失的键以避免最明显的错误，这些错误可能导致渲染周期效率较低。

Reacts 渲染优化真的会对很长的列表产生影响。对于范围可能只有几个项目的应用程序，不会有太大的收益，因此数组索引可能是一个合理的解决方案。