React项目DataGrid表格仅渲染最后一条数据问题排查求助

根因 #

MUI DataGrid组件要求每行数据的id字段必须全局唯一，该字段是组件内置的行唯一识别标识，重复id的行数据会被后加载的同id数据覆盖，最终仅保留最后一条。
你提供的接口返回数据中所有条目id均为1，生成的表格行数据id全部重复，触发覆盖逻辑导致仅展示最后一条数据。

解决方法 #

任选以下一种方案修复即可：

• 方案1：替换行id为业务唯一字段
  如果接口返回的workStationID为唯一值，修改行生成逻辑：

const rows = (): GridRowsProp => {
    return poslists.map(pos => ({
        id: pos.workStationID,
        col1: pos.workStationID,
        col2: pos.ip,
        col3: pos.version,
        col4: pos.status,
        col5: pos.dateTimeStamp,
        col6: pos.hardware,
        col7: pos.printer,
    }));
};

• 方案2：使用数组下标生成临时唯一id
  如果无业务侧唯一字段，用map遍历的下标构造唯一id：

const rows = (): GridRowsProp => {
    return poslists.map((pos, index) => ({
        id: `pos_row_${index}`,
        col1: pos.workStationID,
        col2: pos.ip,
        col3: pos.version,
        col4: pos.status,
        col5: pos.dateTimeStamp,
        col6: pos.hardware,
        col7: pos.printer,
    }));
};

• 方案3：通过getRowId属性指定唯一标识
  无需修改现有行数据结构，直接给DataGrid组件指定唯一标识字段：

<StyledDataGrid 
    columns={columns} 
    rows={rows()} 
    loading={loading} 
    getRowId={(row) => row.col1}
/>

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