antd table 后端返回有值,columns也是map出来的,data有值,但是设置排序,排序值总是undefined
时间: 2025-02-10 07:16:12 浏览: 79
在使用antd的Table组件时,如果后端返回的数据有值,columns也是通过map方法生成的,data有值,但设置排序后排序值总是undefined,可能是由于以下几个原因导致的:
1. **sortOrder属性未正确设置**:确保在columns中正确设置了sortOrder属性。sortOrder属性用于指定当前列的排序状态。
2. **onChange事件未处理**:确保在Table组件上正确处理了onChange事件。onChange事件会在排序、筛选、分页等操作时触发,需要在该事件中处理排序逻辑。
3. **columns中的sortOrder未动态设置**:如果sortOrder是动态设置的,确保在columns的map方法中正确设置了sortOrder。
以下是一个示例代码,展示了如何正确设置排序:
```jsx
import React from 'react';
import { Table } from 'antd';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.localeCompare(b.name),
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
sorter: (a, b) => a.address.localeCompare(b.address),
},
];
class App extends React.Component {
state = {
sortedInfo: {},
};
handleChange = (pagination, filters, sorter) => {
this.setState({
sortedInfo: sorter,
});
};
render() {
const { sortedInfo } = this.state;
return (
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
);
}
}
export default App;
```
在这个示例中,我们使用了`localeCompare`方法来比较字符串,使用减法运算符来比较数字。`sorter`属性是一个函数,用于定义排序逻辑。`onChange`事件处理函数`handleChange`用于更新排序状态。
阅读全文
相关推荐













