React组件表格行唯一ID生成问题：ID无法在渲染时持久化

你当前的问题在于uniqueID是组件每次渲染时重新声明的变量，组件重渲染时这个变量会被重置为1，导致ID无法保持一致。以下是几种可靠的解决方法：

1. 使用数据本身的唯一标识（最优方案） #

如果你的表格数据来自后端或自带天然唯一字段（比如数据库ID、业务唯一编码等），直接用这个字段作为行ID是最稳妥的方式，完全不受重渲染影响：

// 假设你的行数据结构如下
const tableData = [
  { id: 1001, name: "张三", age: 25 },
  { id: 1002, name: "李四", age: 30 },
];

// 渲染表格行时直接复用数据自带的唯一ID
return tableData.map(item => (
  <tr key={item.id}>
    <td style={{ textAlign: 'center' }}>{item.id}</td>
    <td>{item.name}</td>
    <td>{item.age}</td>
  </tr>
));

2. 给数据项添加持久化的唯一ID（无天然ID时使用） #

如果数据本身没有唯一标识，可以在组件初始化时给每个数据项生成唯一ID并存在状态中，确保重渲染时不会丢失：
首先安装uuid库用于生成标准唯一ID：

npm install uuid

然后在组件中使用：

import { useState, useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';

function TableComponent() {
  const [rawData, setRawData] = useState([
    { name: "张三", age: 25 },
    { name: "李四", age: 30 },
  ]);

  // 仅在原始数据变化时重新生成带ID的数据
  const dataWithId = useMemo(() => {
    return rawData.map(item => ({
      ...item,
      uniqueId: uuidv4()
    }));
  }, [rawData]);

  return (
    <table>
      {dataWithId.map(item => (
        <tr key={item.uniqueId}>
          <td style={{ textAlign: 'center' }}>{item.uniqueId}</td>
          <td>{item.name}</td>
          <td>{item.age}</td>
        </tr>
      ))}
    </table>
  );
}

3. 使用useRef保存计数器（仅限数据顺序不变的场景） #

如果不想依赖外部库，且表格数据的顺序不会发生变化（不会增删、排序），可以用useRef保存计数器，因为useRef的值在组件整个生命周期内不会重置：

import { useRef, useEffect, useState } from 'react';

function TableComponent() {
  const uniqueIDRef = useRef(1);
  const [tableData, setTableData] = useState([
    { name: "张三", age: 25 },
    { name: "李四", age: 30 },
  ]);

  // 原始数据更新时重置计数器
  useEffect(() => {
    uniqueIDRef.current = 1;
  }, [tableData]);

  return (
    <table>
      {tableData.map(() => {
        const id = uniqueIDRef.current++;
        return (
          <tr key={id}>
            <td style={{ textAlign: 'center' }}>{id}</td>
            {/* 其他单元格内容 */}
          </tr>
        );
      })}
    </table>
  );
}

注意：这个方法仅适合数据结构稳定的场景，如果数据发生排序、中间插入/删除操作，会导致ID和数据项不匹配。

内容的提问来源于stack exchange，提问作者Shrutika Jaiswal