如何在MUI X Data Grid中插入新行时自动递增行ID？

问题根源 #

你在循环里用rows.length生成ID，但React的状态更新是异步批量执行的——整个循环过程中rows始终是初始的空数组（长度0），所以所有新行的id都会被设为0+1=1，既重复又无法实现递增。

解决方案 #

方案1：批量转换数据后一次性更新状态（推荐） #

没必要循环调用setRows，直接把fetched_data批量转换成行数据，一次性更新状态，这样可以用索引或数据内的唯一值生成ID：

// 替换原循环代码
const newRows = fetched_data.map((item, index) => ({
  id: index + 1, // 用索引递增，或直接用item中唯一字段如item.payment_address
  wallet: item.payment_address,
  project: "FluxNodes",
  status: "Active",
  collateral: item.amount,
  tier: item.tier,
  reliability: "?",
  rewards: "?",
  pending_rewards: "?",
}));
setRows(newRows);

方案2：在setState回调中依赖prevRows生成ID #

如果必须逐行添加，不要用外部的rows.length，而是在setRows的回调里取更新前的状态prevRows的长度来生成ID：

// 修改循环内代码
for (let j = 0; j < fetched_data.length; j++) {
  const item = fetched_data[j];
  setRows((prevRows) => [...prevRows, {
    id: prevRows.length + 1, // 依赖更新前的状态长度，而非外部未更新的rows
    wallet: item.payment_address,
    project: "FluxNodes",
    status: "Active",
    collateral: item.amount,
    tier: item.tier,
    reliability: "?",
    rewards: "?",
    pending_rewards: "?",
  }]);
}

方案3：使用数据本身的唯一值作为ID #

如果fetched_data里有天然唯一的字段（比如payment_address），直接用它当ID更稳妥，避免索引可能带来的重复问题：

id: item.payment_address, // 只要该字段全局唯一，即可直接作为行ID

额外提示 #

MUI X Data Grid要求每行id必须唯一，优先使用数据本身的唯一标识，若没有则可以生成UUID（如crypto.randomUUID()），尽量避免依赖状态长度这种易变的值。

内容的提问来源于stack exchange，提问作者Ted's Projects