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;