排序不适用于 MUI 数据网格：数据网格 sortComparator 给出未定义答案

【问题标题】：Sorting not working for MUI Data Grid: Data Grid sortComparator giving undefined排序不适用于 MUI 数据网格：数据网格 sortComparator 给出未定义
【发布时间】：2022-07-28 22:29:36
【问题描述】：

我正在尝试在数据网格中使用嵌套值对数据进行排序但是在数据网格列的 sortComparator 上未定义

代码：列数据设置：

   { 
    headerName: 'Title',
    field: `${this.props.type}.title`,
    width: 500,
    type: "string",
    renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
    sortComparator: this.titleSorting
   }


titleSorting = (a,b)=>{
       console.log(a);
       console.log(b);
}

数据网格：

               <DataGrid
                    rows={rowsDataGrid}
                    columns={columnsDataGrid}
                    components={{
                        Toolbar: this.getSearchTextField
                    }}
                    pageSize={5}
                    rowsPerPageOptions={[5]}
                   
                    // checkboxSelection
                    // disableSelectionOnClick
                    autoHeight
                />

两个控制台打印未定义的问题理想情况下，它应该给出整行 a 和行 b 或至少行 a 列数据和行 b 列数据

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

尝试使用自定义字段和 valueGetter 参数：

{ 
    headerName: 'Title',
    field: "CustomField,
    valueGuetter: () => this.props.type.title,
    width: 500,
    type: "string",
    renderCell: (valueReceived) => this.getImageorVideoLogo(valueReceived.row),
    sortComparator: this.titleSorting
}

并在比较器函数中添加比较算法，例如

const titleSorting = (a, b) => {
   a - b;
}

【讨论】：