反応テーブルを仮想化してソートを追加するには？

Question

Githubにテーブルソートデ​​モを使用してソートをプロジェクトに追加しようとしています。

マイコード：

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Table, Column, SortDirection, SortIndicator } from 'react-virtualized'; 
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; 

import 'react-virtualized/styles.css'; 

class NewTable extends React.Component { 
    constructor(props) { 
    super(props); 

    this.dataList = props.list; 

    this.state = { 
     headerHeight: 50, 
     rowHeight: 25, 
     rowCount: this.dataList.length, 
     height: 400, 
     sortBy: 'columnone', 
     sortDirection: SortDirection.ASC, 
    }; 

    this.headerRenderer = this.headerRenderer.bind(this); 
    this.sort = this.sort.bind(this); 
    } 

    isSortEnabled() { 
    const list = this.dataList; 
    const rowCount = this.state; 

    return rowCount <= list.length; 
    } 

    sort({ sortBy, sortDirection }) { 
    this.setState({ sortBy, sortDirection }); 
    } 

    headerRenderer({ 
    dataKey, 
    sortBy, 
    sortDirection, 
    }) { 
    return (
     <div> 
     Column One 
     {sortBy === dataKey && 
      <SortIndicator sortDirection={sortDirection} /> 
     } 
     </div> 
    ); 
    } 

    render() { 
    const { 
     headerHeight, 
     height, 
     rowHeight, 
     sortBy, 
     sortDirection, 
    } = this.state; 

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

    return (
     <AutoSizer disableHeight> 
     {({ width }) => (
      <Table 
      headerHeight={headerHeight} 
      height={height} 
      rowCount={list.length} 
      rowGetter={({ index }) => sortedList[index]} 
      rowHeight={rowHeight} 
      sort={this.sort} 
      sortBy={sortBy} 
      sortDirection={sortDirection} 
      width={width} 
      > 
      <Column 
       dataKey='columnone' 
       headerRenderer={this.headerRenderer} 
       disableSort={!this.isSortEnabled} 
       width={200} 
       flexGrow={1} 
      /> 
      </Table> 
     )} 
     </AutoSizer> 
    ); 
    } 
} 

export default NewTable; 

私のコードをクリックしたときにASCとDESCの矢印が上下にひっくり返すと示しているが、実際のソートが発生しません。私は何が欠けていますか？

ソートがどこで起こっているのか分かりません。私は機能を見ていますが、出力がどこに行くのか分かりません。

ありがとうございました！

EDIT：データはJSONとして入力します。

Answer 1

コードがrender関数内で、並べ替えのインラインを行い、react-virtualized Table demoページのように、あなたが貼り付けスニペット：

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

それはしなければならないので、これはおそらく、あなたが生産アプリの欲しいものではありませんコンポーネントがレンダリングされるたびにデータを再ソートします。代わりに、sortByフィールドまたはsortDirectionが変更されたときにデータを1回だけソートしたい場合は、コンポーネントstate（または使用する場合はRedux）にソートされたバージョンのデータを保存します。

Tableは、あなたが提供するsort小道具を呼び出すことによって、データをソート/ソートする必要がある場合に通知します。

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

    this.setState({ sortBy, sortDirection, sortedList }); 
} 

：

sort({ sortBy, sortDirection }) { 
    this.setState({ sortBy, sortDirection }); 
} 

は、あなたのコンポーネントの状態で並べ替え条件を保存しているので、あなたもまた状態でソートされた結果を格納することができます：上記のあなたの例では、それは、この関数が呼び出された意味します残っている唯一のことは、rowGetter関数がstateのsortedListを使用して行を取得することです。