javascript - 按 desc、asc 排序函数

标签 javascript reactjs ecmascript-6 material-ui

我有带有列数组和数据数组的表组件。我需要对列进行排序并更新表的表状态。我的方法从列接收两个参数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 })
    }

最佳答案

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]),
 )

关于javascript - 按 desc、asc 排序函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45713339/

相关文章:

reactjs - 创建React应用程序/Craco : how to implement "localIdentName" option for changing classnames?

javascript - 从两个对象数组中过滤,然后合并它们

javascript - 在 array.map javascript 中使用回调函数

javascript - Mongoose 分页

javascript - jQuery Ajax 运行,为什么?

javascript - 替代 x.innerHTML 用于长文本

javascript - 使用node和socket.io运行自定义函数

reactjs - 每当我在应用程序中执行某些操作时,React 都会抛出数千个 TypeError

javascript - 对象中丢失上下文

reactjs - 使用 mobX 和 React Context 从类中访问商店