ReactJS：在数组元素中提供键的最佳方法是什么

Question

我只是从ReactJS开始，并尝试了其他类似问题的解决方案，但到目前为止还算不上成功。

这是我的工作代码：

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


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

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

但是当我将Numbers Array传递为：

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

我收到此错误：

警告：遇到两个具有相同密钥的孩子4。密钥应该是唯一的，以便组件在更新期间保持其身份。

所以我的问题是：在这种情况下，提供密钥的最佳方法是什么？如果我将数字（如上例所示）用作键，那么避免此警告的最佳解决方案是什么？

谢谢！

Answer 1

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

注意：
如果项目具有唯一性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>