在 MUI 数据网格中插入新行时如何自动递增行 id？

我试图将行从 MUI Kit 插入到我的数据网格组件中，而不必处理我不需要但需要唯一的 id。

我尝试根据以下内容增加 id 号rows.length但由于某种原因我总是得到 0 。

这是我的代码：

  const initial_rows: GridRowsProp = [];
const [rows, setRows] = React.useState(initial_rows);

for (let j = 0; j < fetched_data.length; j++) {
            console.log(rows.length);
            const newRow = {
              id: rows.length + 1,
              wallet: fetched_data[j]["payment_address"],
              project: "FluxNodes",
              status: "Active",
              collateral: fetched_data[j]["amount"],
              tier: fetched_data[j]["tier"],
              reliability: "?",
              rewards: "?",
              pending_rewards: "?",
            };
            setRows((prevRows) => [...prevRows, newRow]);
          }

<DataGrid
          rows={rows}
          columns={columns}
          pageSize={25}
          rowsPerPageOptions={[25]}
          editMode="row"
          density="compact"
          disableColumnMenu
          disableSelectionOnClick
          loading={loading}
          initialState={{
            sorting: {
              sortModel: [{ field: "ratio", sort: "desc" }],
            },
          }}
          components={{
            Toolbar: GridToolbar,
            LoadingOverlay: LinearProgress,
          }}
          componentsProps={{
            toolbar: {
              showQuickFilter: true,
              quickFilterProps: { debounceMs: 500 },
            },
          }}
        />

当行作为 props 传递时，您可以添加一个 id：

<DataGrid rows={rows.map((item, index) => ({ id: index + 1, ...item }))} .../>