没有键的反应列表

Question

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

数据可能会改变，但不太可能改变，而且无论如何只有 20 个奇数值，所以重新渲染整个表并不是真正的问题。

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

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

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

我应该补充一点，我了解密钥的用途以及它们为何有用，但在这种情况下，我没有任何密钥，最简单的方法就是不要使用它们，因为不太可能重新渲染。

Answer 1

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

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

在您的数据没有唯一键的情况下。您应该使用一些为每个项目生成唯一 id 的函数。该函数的一个简单版本只是增加一个全局计数器：

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


// Do this in the props change or whereever your data gets passed in
let keyedData = data.map(value => Object.assign(value, { Id: uniqueId() });

// In render
data.map(value => <td key={value.Id}>{value}</td>

这样，在多次渲染调用中，返回的 id 总是唯一的。我们在获取数据时分配键，以避免在每次调用 时重新渲染整个列表render()。

然而，这种情况实际上非常罕见，因为您通常可以找到一些支持数据的组合，这些组合将为每个条目生成一个唯一的键。

如果您确实使用索引作为键

本文列出了选择索引作为键方法时应满足的3 个条件，我认为这是一个很好的检查列表：

1. 列表和项目是静态的——它们不是计算出来的，也不会改变；

2. 列表中的项目没有 id；

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