按 desc、asc 排序功能

Question

我有带有列数组和数据数组的表格组件。我需要对列进行排序并更新表的表状态。我的方法从列接收两个参数 key（列键）和 sortable（可排序的真或假列），我搞砸了什么？排序表列的最佳解决方案是什么？如何让它变得简单，并按数字和字符串排序

const columns = [
    {
        key: 'deviceType',
        label:'Device Type',
        numeric: false,
    }, {
        key: 'deviceID',
        label:'Device ID',
        sortable: true,
        numeric: true,
        // cellRenderer: ({item, key}) =>
        //          <Button >Default</Button>,
    }, {
        key: 'name',
        label: 'Name',
        sortable: false,
        numeric: false,

    },{
        key: 'currentVersion',
        label: 'Current Version',
        sortable: false,
        numeric: false,
    },{
        key: 'location',
        label: 'Location',
        sortable: false,
        numeric: false,
    },{
        key: 'status',
        label: 'Status',
        sortable: false,
        numeric: false,
    },{
        key: 'lastAliveMessage',
        label: 'Last alive message',
        sortable: false,
        numeric: false,
    }, {
        key: 'action',
        label: 'Actions',
        cellRenderer: () => <SimpleMenu />,
    }]

const data = [
    { key: 1, deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 2, deviceType: 'Tag', deviceID: 2, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 3, deviceType: 'Tag', deviceID: 3, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 4, deviceType: 'Tag', deviceID: 4, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    { key: 5, deviceType: 'Tag', deviceID: 5, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
]

class EnhancedTable extends Component {
    state = {
        selected: [],
        data,
        order: 'asc',
        search: '',
    }

    handleRequestSort = (key, sortable) => {
        let order = 'desc'

        // if (this.state.order.by === key && this.state.order.direction === 'desc') {
        //     order = 'asc'
        // }
        if (sortable && this.state.order.direction === 'desc') {
            order = 'asc'
        }
        const data = this.state.data.sort(
            (a, b) => {
                order === 'desc' ? b[key] > a[key] : a[key] > b[key]},
        )

        this.setState({ data, order })
    }

Answer 1

sort 会就地修改数组。你忘了回来。

const data = this.state.data.slice()
data.sort(
            (a, b) => {
                return order === 'desc' ? b[key] > a[key] : a[key] > b[key]
            },
        )

或者删除{}

 data.sort(
   (a, b) => (order === 'desc' ? b[key] > a[key] : a[key] > b[key]),
 )