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

Posted 2023-02-19

【中文标题】如何在反应 js 中使用 uuid 添加唯一键？

【英文标题】：how to add unique key using uuid in react js?

【发布时间】：2022-01-11 05:43:04

【问题描述】：

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

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

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

【问题讨论】：

通常数据来自在对象上具有 id 的 API，并且您使用这些 id 作为 React 列表的键。您在这里的用例是什么？

假设数据没有id，我们需要显式添加一个带有库的id

然后根据您的需要和用例添加 id。你在哪里坚持这个？这个问题/问题似乎太投机了，无法在这里讨论。

其实我一直在找一些关于这个的文章，但是我没有找到我真正需要的东西，所以我决定在这里发帖。好吧，我认为马里奥的回答对我来说是一个很好的回答，谢谢 ggorlen 的宝贵时间，我很感激。

【参考方案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

【讨论】：

好的，谢谢先生，感谢您的帮助。

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

好的，我下次试试。