javascript - 没有键的 react 列表

Question

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

数据可能会发生变化，但不太可能发生变化，而且无论如何，只有二十个奇数值，因此重新渲染整个表并不是真正的问题。

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

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

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

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

Answer 1

您可以使用索引作为键。我认为值得重申的是，使用索引作为键仅在OP面临的非常具体的场景中才能正常工作。

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

如果您的数据没有唯一键。您应该使用一些函数为每个项目生成唯一的 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() 时都必须重新渲染整个列表。

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

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

This article lists 3 conditions在选择索引作为键方法时应该满足这一点，我认为这是一个很好的检查列表:

1. The list and items are static–they are not computed and do not change;

2. The items in the list have no ids;

3. The list is never reordered or filtered.