React虚拟化表 - 排序和排序

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;