React: Как отсортировать данные в asc и desc в ReactJS

Question

Я показываю данные через API (Данные отображаются в пагинации), API были встроены в Loopback. Я хочу отсортировать в моем проекте. Например, если пользователь щелкнет по атрибуту заголовка таблицы, он будет сортировать данные в asc и desc. Я новичок в ReactJS, у меня мало знаний для реализации этой логики. Может, кто-нибудь поможет мне разобраться. Спасибо

код

<code>         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()}

Изменить ссылку ) } } ReactDOM.render (, document.querySelector ('div # my-example'))

Answer 1

semantic-ui-реаги * уже поддерживает функцию сортировки.

Проверьте этот пример: https://react.semantic -ui.com / collection / table/ # варианты-сортируемые

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>
    )
  }
}

Answer 2

Предположим, что вы извлекли свои данные, и теперь ваше состояние выглядит следующим образом:

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

Теперь работа на сервере завершена, вам не нужно извлекать новые данные каждый раз, когда пользователь нажимаетчтобы отсортировать, теперь просто добавьте функцию для обработки кликов пользователя, скажем, что клики по использованию в порядке asc, ваш обработчик должен выглядеть следующим образом:

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)})
   }

}

Answer 3

Чтобы реализовать это поведение, вы должны использовать «Фильтр заказов» для Loopback: https://loopback.io/doc/en/lb3/Order-filter.html

В результате фильтр в поле «id» должен выглядеть примерно так:

filter: {"where": {}, "order": ["id ASC"], "limit": 15, "skip": 0}

filter: {"where": {}, "order": ["id DESC"], "limit": 15, "skip": 0}