React集成Material-UI DataGrid组件列排序功能失效问题求助

• 行唯一标识取值不符合要求：你在getRowId中直接返回row.objectguid，但接口返回的objectguid是单元素数组类型（如["8672340d-xxx"]），不是字符串、数字这类原始值。这类非原始类型的key会导致React在排序完成后做DOM diff时，无法正确识别行的顺序变化，最终表现为点击排序按钮后列表没有任何变动。
• 字段类型与组件预期不匹配：接口返回的每个列对应字段（如samaccountname、cn）都是单元素数组，而非直接的字符串值。MUI DataGrid的内置排序逻辑没有针对数组类型的字段值做适配，即便触发了排序流程，值比较环节也无法按预期生成排序结果。
• 配置项拼写错误：代码中DataGrid属性psnSize是笔误，正确属性名为pageSize，这类配置异常可能干扰组件内部状态的正常运行。

1. 对接口返回数据做标准化处理
   拿到接口响应后，先把所有单元素数组类型的字段转为实际的字符串值，再写入rows状态。可直接替换代码中接口回调的处理逻辑：

   (result) => {
     if (result.message) {
       setRows([]);
       return;
     }
     // 扁平化所有单元素数组字段
     const normalizedRows = result.map(rowData => {
       const row = {};
       Object.keys(rowData).forEach(field => {
         const value = rowData[field];
         row[field] = Array.isArray(value) ? value[0] : value;
       });
       return row;
     });
     setRows(normalizedRows);
   }
   

2. 修正行id的取值逻辑
   字段标准化完成后，row.objectguid会变成纯字符串值，此时原有的getRowId={(row) => row.objectguid}配置就能返回符合要求的唯一字符串id，满足React对列表key的类型要求。
3. 修正笔误的配置项
   将DataGrid组件上的psnSize={0}改为正确的pageSize={10}，消除配置异常带来的隐性问题。
4. 为需要排序的列开启排序能力
   你使用的旧版@material-ui/data-grid组件，默认列是关闭排序能力的，需要给每个需要支持排序的列手动添加sortable: true属性，不需要只给用户名列单独配置，其他列如果需要排序能力按同样规则设置即可。

如果后端接口无法调整返回格式，必须保留数组类型的字段结构，可以通过给列自定义sortComparator方法，手动提取数组内的元素完成值比较；但无论如何都要将getRowId的返回值转成字符串类型的唯一标识，否则排序后的行顺序依然无法被正常渲染。

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