虽然在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生成的id之后为空：
And code sandbox code

您可以安装react-uuid

import uuid from 'react-uuid'

const array = ['one', 'two', 'three']

export const LineItem = item => <li key={uuid()}>{item}</li>

export const List = () => array.map(item => <LineItem item={item} />)

or you can use crypto.randomUUID() directly without pckgs