react-redux实现升序降序排序

女爷i 2022-04-13 04:14 301阅读 0赞

*  action.js

下面代码中的patientList是一个数据数组，比较patientList数组中的sirenId，然后patientList这一行数据也排序

export function upSort(patientList) {
      return async dispatch => {
        var sortarr = []
        for (var i = 0; i < patientList.length; i++) {
          for (var j = 0; j < patientList.length - i - 1; j++) {
            if (patientList[j + 1].sirenId > patientList[j].sirenId) {
              var temp;
              temp = patientList[j];
              patientList[j] = patientList[j+1];
              patientList[j+1] = temp;
            }
          }
          sortarr.push(temp)
        }
        console.log('sortarr asc: ',sortarr);
        // dispatch(changeSort(sortarr));
      };
    }
    export function downSort(patientList) {
      return async dispatch => {
        var sortarr2 = []
        for (var i = 0; i < patientList.length; i++) {
          for (var j = 0; j < patientList.length - i - 1; j++) {
            if (patientList[j + 1].sirenId < patientList[j].sirenId) {
              var temp;
              temp = patientList[j];
              patientList[j] = patientList[j+1];
              patientList[j+1] = temp;
            }
          }
          sortarr2.push(temp)
        }
        console.log('sortarr2 desc: ',sortarr2);
        // dispatch(changeSort(sortarr2));
      };
    }
    function changeSort(patientsList) {
      return {
        type: TYPES.PATIENTS_LIST,
        text: patientsList
      };
    }

*  只摘取部分重要代码

import React, { Component } from "react";
    import { connect } from 'react-redux'
    import {
      Table,
      Menu,
      Icon,
      Popup,
      Button,
      Header,
      Input,
      Pagination
    } from "semantic-ui-react";
    import "semantic-ui-css/semantic.min.css";
    import "./DeviceList.css";
    import _ from 'lodash'
    import { getPatientsList, getPatientInfo, upSort, downSort } from "../action/Action";
    import up from './up.png'
    import down from './down.png'
    class DeviceList extends Component {
      constructor(props) {
        super(props);
        this.state = {
          //先顺序排序
          up_down: true
        };
      }
      rank() {
        const { upSort } = this.props;
        const { downSort } = this.props;
        const up_down = !this.state.up_down;
        this.setState({ up_down });
        this.state.up_down ? (upSort(this.props.listPatients)) : (downSort(this.props.listPatients));
      }
    
      render() {
        let self = this;
        return (
          <div className="device-list-container">
            <Table celled className="result-table">
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell className="totalbox">SirenID
                    <div className="updownbox" onClick={this.rank.bind(this)}>
                      <img src={up} className='upbox' />
                      <img src={down} />
                    </div>
                  </Table.HeaderCell>
                </Table.Row>
              </Table.Header>
            </Table>
          </div>
        );
      }
    }
    
    const mapDispatchToProp = dispatch => ({
      getPatientsList: self => dispatch(getPatientsList(self)),
      getPatientInfo: (self, patientList) => dispatch(getPatientInfo(self, patientList)),
      upSort: patientList => dispatch(upSort(patientList)),
      downSort: patientList => dispatch(downSort(patientList))
    });