如何在没有 ID 的 React 中映射数组？

Posted 2023-02-22

【中文标题】如何在没有 ID 的 React 中映射数组？

【英文标题】：How to map through an array in React without ids?

【发布时间】：2017-08-27 16:43:36

【问题描述】：

我有一个相当标准的数组：

["value","value","value"]

如果我想遍历它，每个列表项都需要一个唯一的键。但是在这种情况下我该怎么做呢？

JSON 通常带有一个 id - 但在这种情况下，我没有任何 id，而且值也不是唯一的，所以我不能只使用它们作为键。

someArray.map(object => 
                return (<span key=???> object </span>); )

【参考方案1】：

可以使用map的第二个参数，索引：

someArray.map((object, i) => 
                return (<span key=i> object </span>); )

只要someArray 在组件的生命周期内保持不变，就可以了；如果没有，当您移动、插入或移除项目时，它会导致不必要的重新渲染，因为孩子的所有道具都发生了变化（但在这种情况下，您根本不会注意到它）。

【讨论】：

你应该提到，如果你有一个项目的唯一标识符，你应该肯定用它作为键，并且应该只在正在渲染的数组是静态的。

【参考方案2】：

每个列表项都需要一个唯一的键

其实不然。我觉得 React 的警告在这里被夸大了。只有当您需要更好的性能时才需要唯一键，我相信还有一些关于维护组件状态的东西。值得注意的是，如果您执行dom.div(null, ["text"])，您将收到警告，但如果您执行dom.div(null, ...["text"])，您将不会收到任何警告，尽管在两种情况下都传递了相同的数组。在后一种情况下，React 只是使用索引作为键，在前一种情况下也完全可以，但 React 会无缘无故地发出警告。

如果渲染函数是无状态的并且您不需要更好的性能，只需给它们在数组中的索引键以消除警告，或使用扩展运算符。