添加一个唯一的 id 并将其作为密钥使用

文章正文还需 3 分钟

如果您使用 Vue 或 React，您必须了解key

js 复制代码

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

js 复制代码

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ item.text }}
  </li>
</ul>

React 和 Vue 都建议不要使用索引作为键，特别是在项目的顺序可能更改的情况下

js 复制代码

<ul>
  <li v-for="(todo, index) in todos" :key="index">
    {{ item.text }}
  </li>
</ul>

有时候我们很幸运，我们的数据有一个唯一的 id 来标识每个项目

其他时候，我们就没那么幸运了。这些项目没有唯一的 id。或者他们这样做，但是我们希望多次渲染该项。在这种情况下，如果我们使用 id 作为密钥，就会遇到重复的密钥问题

我们必须为项目创建唯一的 id，并将它们用作键

有很多方法可以做到这一点。我将选择 Lodash 的 uniqueId 方法，因为在我正在进行的项目中使用了 Lodash，而且没有必要加载另一个库

js 复制代码

import uniqueId from 'lodash/uniqueId';

在渲染 todos 之前，循环遍历它并添加一个 uniquekey

js 复制代码

todos.forEach((todo) => {
  todo.uniqueKey = uniqueId();
});

然后，可以使用 todo.uniqueKey 作为密钥。uniqueId ()将为每个 todo 生成唯一的 id。但是，有时这些 id 可能与页面中不同列表的其他 id 冲突。我们可以更进一步，向 uniqueId (‘ todo _’)添加一个参数，以避免重复的键

此 uniqueKey 仅被添加用于在前端执行特定的工作。我们可能不需要把它发送到后端。因此，在将 todos 发送到后端之前，请确保删除 uniqueKey

js 复制代码

todos.forEach((todo) => {
  todo.uniqueKey && delete todo.uniqueKey;
});

为开发技巧而翻译