Question

我有一个数字数组，我希望以表格形式呈现。该数组是从api调用返回的，不是由我的应用程序生成的。

数据可能会改变，但不太可能这样做，并且在任何情况下只有20个奇数值，因此重新渲染整个表并不是真正的问题。

一个简单的data.map(value => <td>{value}</td>应该这样做。

但我收到Each child in an array or iterator should have a unique "key" prop.警告。有什么方法我可以告诉React没有密钥，我希望它重新渲染整个表，如果有任何变化。

或者，有什么办法可以为每个条目生成一个唯一的密钥？数据项不保证是唯一的。

我应该补充一点，我明白了键是什么以及为什么它们是usefult但在这种情况下我没有任何最简单的事情就是不使用它们，因为不太可能重新渲染。

Answer 1

data.map((value,index) =>{ 
  <td key={index}>{value}</td>}
)

或

  data.map((value,index) =>{ 
       let i = Math.floor(Math.random() * 1000+1)
      <td key={i}>{value}</td>}
   )

您可以使用index作为密钥，因为每次都是唯一的

Answer 2

您可以使用索引作为键。我认为值得重申的是，使用索引作为关键只能在OP面临的特定情况下正常工作。

当需求发生变化并且所有突然修改列表时，这尤其令人讨厌。这显示为渲染期间未更新的项目，因为更新的项目具有相同的索引，其值不同，但反应仅关注索引。

在大多数情况下，您应该使用一些生成唯一ID的函数。该函数的简单版本只增加一个全局计数器：

// Declared globally (as in attached to window object or equivalent)
var myuniqueidcounter = 0;
function uniqueId() {
    return myuniqueId++;
}


data.map(value => <td key={uniqueId()}>{value}</td>

这样，在多次渲染调用中，返回的id总是

如果您确实按索引键入

选择index-as-key方法时应该满足

This article lists 3 conditions，我认为这是一个很好的检查清单：

列表和项目是静态的 - 它们不会被计算，也不会改变;



列表中的项目没有ID;



列表永远不会重新排序或过滤。

Answer 3

根据所提出的问题，可能值得说的是还有另一种不使用密钥的解决方案：

例如以下将抱怨没有唯一键：

React.createElement('div', {}, [<span>1</span>, <span>2</span>]);

然而，以下渲染所有子节点都没有问题（这是 JSX 转换为具有多个子节点的节点的 JS 的样子）：

React.createElement('div', {}, <span>1</span>, <span>2</span>);

所以如果你有例如生成的反应元素片段和唯一键的小列表在您的情况下没有提供和优势，您可以这样做：

React.createElement.apply(null, ['div', {}, ...elementList])

注意事项：

elementList 作为参数传递给 React.createElement，如果列表很大，这可能是一个问题。
它会在每次渲染时重新渲染所有子级。
使用唯一键通常是推荐的方法，并且在重新渲染时性能更高。
但是，在某些情况下，您只想在一次拍摄中渲染而不关心重新渲染，或者数据的结构不适合您可以充分利用唯一键的方式。如果确实需要，您可以将其用作解决方法。

没有键的反应列表

3 个答案: