如何在反应 js 中使用 uuid 添加唯一键？答案

【问题标题】：how to add unique key using uuid in react js?如何在反应 js 中使用 uuid 添加唯一键？
【发布时间】：2022-01-11 05:43:04
【问题描述】：

我在 StockOverflow 中读到了某人的评论，他谈到了 React 键并说

'React 需要 STABLE 键，这意味着您应该分配一次键，并且列表中的每个项目每次都应该收到相同的键，这样 React 可以在协调虚拟 DOM 并决定哪些组件时围绕您的数据更改进行优化需要重新渲染。因此，如果您使用 UUID，则需要在数据级别而不是在 UI 级别执行此操作，

我想问是否有人知道如何在实际代码中应用它，例如我们有一个上下文组件，它有一个对象数组和另一个映射通过这个数组的组件，我们如何使用 uuid( ) 或任何其他软件包。

【问题讨论】：

通常数据来自在对象上具有 id 的 API，并且您使用这些 id 作为 React 列表的键。您在这里的用例是什么？
假设数据没有id，我们需要显式添加一个带有库的id
然后根据您的需要和用例添加 id。你在哪里坚持这个？这个问题/问题似乎太投机了，无法在这里讨论。
其实我一直在找一些关于这个的文章，但是我没有找到我真正需要的东西，所以我决定在这里发帖。好吧，我认为马里奥的回答对我来说是一个很好的回答，谢谢 ggorlen 的宝贵时间，我很感激。

标签： arrays reactjs key unique uuid

【解决方案1】：

虽然在 FE 上生成 id 并不是一个常见的要求，但它有时会发生，所以使用uuid 是一个非常好的方法。这很简单，实施也很快。

我在这里为你做了一个例子：

import { useEffect, useState } from "react";
import { v1 } from "uuid";
import "./styles.css";

const items: { name: string; id?: string }[] = [
  {
    name: "Name1"
  },
  {
    name: "Name2"
  },
  {
    name: "Name3"
  },
  {
    name: "Name4"
  },
  {
    name: "Name5"
  },
  {
    name: "Name6"
  }
];

export default function App() {
  const [itemList, setItemList] = useState<{ name: string; id?: string }[]>([]);

  useEffect(() => {
    setItemList(items.map((item) => ({ ...item, id: v1() })));
  }, []);

  return (
    <div className="App">
      {itemList.map((item) => (
        <div key={item.id}>
          {item.name} - {item.id}
        </div>
      ))}
    </div>
  );
}

在此示例中，您的数组在开始时为空，在第一个 useEffect 由 items 填充后，uuid 生成 ids：

And code sandbox code

【讨论】：

好的，谢谢先生，感谢您的帮助。
不客气。请尝试为您的问题添加一些代码示例，以便想要帮助您的人不会从头开始编写所有内容。
好的，我下次试试。