如何在反应虚拟化表中排序答案

【问题标题】：how to sort in table of react virtualized如何在反应虚拟化表中排序
【发布时间】：2019-06-24 23:40:03
【问题描述】：

这是project link使用react虚拟化表，我需要按列排序，但在更新列表数组时出错，当用户单击列标题 ASC、DESC 时如何为表编写 sort() 函数以更新表这是文档，https://github.com/bvaughn/react-virtualized/blob/ae38b6f58478026e6f19d828cad85a05fefd4260/source/Table/Table.example.js#L31-L32

import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';

import { fakeJson } from './Data/fakeJson';

const datalist  = fakeJson;
const list = datalist; 
class TableComponent2 extends React.Component {
 
  constructor(){
    super();
     this.state = {
       sortBy: 'username',
       sortDirection: SortDirection.DESC,
       sortedList: list
     }
   }
  
   sort({ sortBy, sortDirection }) {
     console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = tempList.update(
        list =>
          sortDirection === SortDirection.DESC ? list.reverse() : list
      );
  
    this.setState({ sortBy, sortDirection, sortedList });
  }

    render() {
      return (
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              headerHeight={20}
              height={740}
              rowCount={datalist.length}
              rowGetter={({ index }) => this.state.sortedList[index]}
              rowHeight={60}
              width={width}
              sort={this.sort}
              sortBy={this.state.sortBy}
              sortDirection={this.state.sortDirection}
            >
              <Column
                dataKey='id'
                width={200}
                flexGrow={1}
                label='ID'
              />
              <Column
                dataKey='name'
                width={200}
                flexGrow={1}
                label='NAME'
              />
              <Column
                dataKey='username'
                width={200}
                flexGrow={1}
                label='USERNAME'
              />
            </Table>
          )}
        </AutoSizer>
      );
    }
  }
  
  export default TableComponent2;

【问题讨论】：

const sortedList = tempList.update( list => sortDirection === SortDirection.DESC ? list.reverse() : list ); 不明白更新是做什么的？它来自哪里？

标签： reactjs react-virtualized

【解决方案1】：

基本上您在数组上使用update 方法，而update 不是Array 的方法。

const array = [1, 2, 3, 4, 5];
console.log(array.update); // undefined.
array.update(); //error.

你只需要根据你的SortDirectionreverse你的sorteredList，这就是你需要设置状态的全部。

sort({ sortBy, sortDirection }) {
    console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = sortDirection === SortDirection.DESC ? list.reverse() : list
    this.setState({ sortBy, sortDirection, sortedList });
}

【讨论】：