React：如何在 ReactJS 中以 asc 和 desc 对数据进行排序答案

【问题标题】：React : How to sort data in asc and desc in ReactJSReact：如何在 ReactJS 中以 asc 和 desc 对数据进行排序
【发布时间】：2019-08-09 21:48:31
【问题描述】：

我通过 API 显示数据（数据显示在分页中），API 是在 Loopback 中构建的。我想在我的项目中排序。例如，如果用户单击表头属性，则它将按 asc 和 desc 对数据进行排序。我是新的 ReactJS 没有太多知识来实现这个逻辑，有人可以帮我弄清楚。谢谢

代码

         class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

【问题讨论】：

标签： javascript reactjs ecmascript-6 loopbackjs

【解决方案1】：

假设您获取了数据，现在您的状态如下所示：

state ={
    data : [13,15,21,1,2]
}

现在服务器上的工作就完成了，不用每次用户点击都去取新数据来排序，现在只需要添加一个函数来处理用户点击，比如说@987654322上的使用点击@order，你的处理程序应该是这样的：

const clickHandler = order =>{
    switch(order):{
        case 'asc': return this.setState({data : this.state.data.sort((a,b)=> a-b) })

        case 'desc' : return this.setState({data : this.state.data.sort((a,b) => b-a)})
   }

}

【讨论】：

感谢您的评论。实际上我在我的项目中使用了分页。每次单击都会触发 REST 调用。如果我应用此方法，它将对当前页面上的数据进行排序。我想对data state object 中可能存在的所有数据进行排序。
只有在你的数据实际发生变化时才应该进行 API 调用，如果你正在使用分页，redux 可能是一个好方法，通过集中你的状态，你应该能够反映所有页面的变化无需每次都执行新请求。
实际上，我在每一页上显示的数据有限。 Loopback 提供过滤功能以在每个页面上显示有限的数据，这就是我在每次分页点击时请求的原因
但我希望如果有人点击Next，它将按 asc 或 desc 对数据进行排序

【解决方案2】：

semantic-ui-react已经支持排序功能。

检查这个例子： https://react.semantic-ui.com/collections/table/#variations-sortable

import _ from 'lodash'
import React, { Component } from 'react'
import { Table } from 'semantic-ui-react'

const tableData = [
  { name: 'John', age: 15, gender: 'Male' },
  { name: 'Amber', age: 40, gender: 'Female' },
  { name: 'Leslie', age: 25, gender: 'Female' },
  { name: 'Ben', age: 70, gender: 'Male' },
]

export default class TableExampleSortable extends Component {
  state = {
    column: null,
    data: tableData,
    direction: null,
  }

  handleSort = clickedColumn => () => {
    const { column, data, direction } = this.state

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      })

      return
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    })
  }

  render() {
    const { column, data, direction } = this.state

    return (
      <Table sortable celled fixed>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell
              sorted={column === 'name' ? direction : null}
              onClick={this.handleSort('name')}
            >
              Name
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'age' ? direction : null}
              onClick={this.handleSort('age')}
            >
              Age
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'gender' ? direction : null}
              onClick={this.handleSort('gender')}
            >
              Gender
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {_.map(data, ({ age, gender, name }) => (
            <Table.Row key={name}>
              <Table.Cell>{name}</Table.Cell>
              <Table.Cell>{age}</Table.Cell>
              <Table.Cell>{gender}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    )
  }
}

【讨论】：

感谢您的评论。实际上它只是对当前页面上的数据进行排序。我在我的项目中使用分页。我想对可能在数据状态对象中排序的所有数据进行排序

【解决方案3】：

要实现此行为，您必须对 Loopback 使用“订单过滤器”：https://loopback.io/doc/en/lb3/Order-filter.html

因此，“id”字段上的过滤器应如下所示：

过滤器：{"where":{},"order":["id ASC"],"limit":15,"skip":0}

过滤器：{"where":{},"order":["id DESC"],"limit":15,"skip":0}

【讨论】：