Question

我正在尝试使我的反应虚拟化表可排序。我希望在单击可排序标题时按特定列对表进行排序。我已经按照文档进行了操作，但到目前为止它根本不起作用。这是代码：

// @flow
import React from 'react';

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

class TableView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sortBy: 'index',
            sortDirection: SortDirection.ASC 
        };
    }
    render() {
  if (this.props.table.length < 1) return null;
  const list = this.props.table[0].tabs.map(function({ info, call_stats, ...a }) {
    var call_stats_lookup = {
      lookup_max: 0,
      lookup_min: 0,
      lookup_median: 0,
      lookup_percentile_75: 0,
      lookup_percentile_90: 0,
      lookup_percentile_95: 0,
      lookup_percentile_99: 0,
      lookup_percentile_999: 0,
      lookup_count: 0
    };
    var call_stats_insert = {
      insert_max: 0,
      insert_min: 0,
      insert_median: 0,
      insert_percentile_75: 0,
      insert_percentile_90: 0,
      insert_percentile_95: 0,
      insert_percentile_99: 0,
      insert_percentile_999: 0,
      insert_count: 0
    };
    if (call_stats !== 'undefined' && typeof call_stats !== 'undefined') {
      var Lookup = call_stats.filter(function(obj) {
        return obj.func === 'lookup';
      });
      var Insert = call_stats.filter(function(obj) {
        return obj.func === 'insert';
      });
      if (Lookup.length !== 0) {
        call_stats_lookup.lookup_max = Lookup[0].time.max;
        call_stats_lookup.lookup_min = Lookup[0].time.min;
        call_stats_lookup.lookup_median = Lookup[0].time.median;
        call_stats_lookup.lookup_percentile_75 = Lookup[0].time.percentile[75];
        call_stats_lookup.lookup_percentile_90 = Lookup[0].time.percentile[90];
        call_stats_lookup.lookup_percentile_95 = Lookup[0].time.percentile[95];
        call_stats_lookup.lookup_percentile_99 = Lookup[0].time.percentile[99];
        call_stats_lookup.lookup_percentile_999 =
          Lookup[0].time.percentile[999];
        call_stats_lookup.lookup_count = Lookup[0].count;
      }
      if (Insert.length !== 0) {
        call_stats_insert.insert_max = Insert[0].time.max;
        call_stats_insert.insert_min = Insert[0].time.min;
        call_stats_insert.insert_median = Insert[0].time.median;
        call_stats_insert.insert_percentile_75 = Insert[0].time.percentile[75];
        call_stats_insert.insert_percentile_90 = Insert[0].time.percentile[90];
        call_stats_insert.insert_percentile_95 = Insert[0].time.percentile[95];
        call_stats_insert.insert_percentile_99 = Insert[0].time.percentile[99];
        call_stats_insert.insert_percentile_999 =
          Insert[0].time.percentile[999];
        call_stats_insert.insert_count = Insert[0].count;
      }
    }
    var call_stats_obj = {
      ...call_stats_insert,
      ...call_stats_lookup
    };
    return { ...a, ...info, ...call_stats_obj };
  });
  const rowGetter = ({ index }) => list[index];
  return (
    <AutoSizer>
      {({ width, height }) => (
        <Table
          ref="Table"
          disableHeader={false}
          width={width}
          headerHeight={50}
          height={height}
          rowHeight={30}
          rowGetter={rowGetter}
          rowCount={list.length}
          sortBy={this.state.sortBy}
          sortDirection={this.state.sortDirection}
          rowClassName={({ index }) => {
              if(index !== -1){
                  return 'ets-table-row';
              } else {
                  return 'ets-table-header';
              }
          }}
          sort={({ sortBy, sortDirection }) => {
              this.setState({sortBy, sortDirection});
          }}
        >
          <Column
            width={150}
            label="Name"
            cellRenderer={({ cellData }) => cellData}
            dataKey="name"
            disableSort={false}
          className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Memory"
            dataKey="memory"
            cellRenderer={({ cellData }) => cellData}
            disableSort={false}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Size"
            dataKey="size"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Type"
            disableSort
            dataKey="type"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Write concurrency"
            disableSort
            dataKey="write_concurrency"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Read concurrency"
            disableSort
            dataKey="read_concurrency"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="lookup max time"
            dataKey="lookup_max"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="lookup count"
            dataKey="lookup_count"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="insert max time"
            dataKey="insert_max"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="insert count"
            dataKey="insert_count"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
        </Table>
      )}
    </AutoSizer>
  );
  }
}

export default TableView;

任何帮助将不胜感激！

Answer 1

通常，有了这类问题，我建议您创建一个Plnkr来演示您报告的问题。对于尝试提供帮助的人而言，这比粘贴到问题中的一堆代码更有帮助。

话虽如此，你实际上并没有排序你的数据。您正在设置state，然后期望反应虚拟化以对数据进行排序，但这不是库的工作方式。它永远不会修改数据。 Table甚至只知道当前的排序信息，以便它可以显示正确的标题样式。

您需要在某处对数据进行实际排序（例如componentWillUpdate）：

const { list } = this.context;
const sortedList = list
    .sortBy(item => item[sortBy])
    .update(list =>
      sortDirection === SortDirection.DESC
        ? list.reverse()
        : list
    )
  : list;

反应虚拟化表 - 排序和排序

1 个答案: