ReactJS FixedDataTable排序和筛选示例不工作

我正在尝试遵循以下教程：

第1部分：

第2部分：

我成功地完成了第1部分，我需要一些帮助来完成第2部分

这是我的第2部分代码：

import React from 'react';
import {Table, Column, Cell} from 'fixed-data-table';

class MyTable extends React.Component {

  constructor(props) {
    super(props);
      this.rows = [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
             "country":"Argentina","ip_address":"247.180.226.89"},
              {"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
             "country":"South Africa","ip_address":"27.146.70.36"},
              {"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
             "country":"Colombia","ip_address":"103.52.74.225"},
             ]
    this.state = {
      filteredDataList: this.rows
    };
  }

_renderHeader(label, cellDataKey) {
  return <div>
        <span>{label}</span>
          <div>
            <br />
            <input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
          </div>
      </div>;
}

_onFilterChange(cellDataKey, event) {
  if (!event.target.value) {
    this.setState({
      filteredDataList: this.rows,
    });
  }
  var filterBy = event.target.value.toString().toLowerCase();
  var size = this.rows.length;
  var filteredList = [];
  for (var index = 0; index < size; index++) {
    var v = this.rows[index][cellDataKey];
    if (v.toString().toLowerCase().indexOf(filterBy) !== -1) {
      filteredList.push(this.rows[index]);
    }
  }
  this.setState({
    filteredDataList: filteredList,
  });
}

  render() {
      return <Table
        height={40+((this.rows.length+1) * 30)}
        width={1150}
        rowsCount={this.rows.length}
        rowHeight={30}
        headerHeight={30}
        rowGetter={function(rowIndex) {return this.rows[rowIndex]; }.bind(this)}>
        <Column dataKey="id" width={50} label="Id"
            headerRenderer={this._renderHeader.bind(this)}/>
        <Column dataKey="first_name" width={200} label="First Name" />
        <Column  dataKey="last_name" width={200} label="Last Name" />
        <Column  dataKey="email" width={400} label="e-mail" />
        <Column  dataKey="country" width={300} label="Country" />
      </Table>;
  }
}

module.exports = MyTable;

我不知道问题出在哪里。

---

谢谢您的时间。

此问题与您的固定数据表版本有关。请在此处查看此v0.6 API迁移：

虽然这个问题已经提出一年了，但我最近遇到了类似的问题，可以分享我的经验。另外，我不知道你对React的熟悉程度如何，但我会尝试以初学者友好的方式进行解释，以帮助他人解决问题，所以如果有任何明显的问题，请耐心等待

因此，您得到的浏览器错误是由于另一个答案中提到的API更改引起的。您正在引用的教程正在使用旧API。新的API变更涉及到一些事情。也就是说，您不再有权访问

rowGetter

，

headerDataGetter

，

headerRenderer

，

dataKey

，以及

label

，等等

新的API涉及将数据直接提供到单元组件中，我将对此进行演示

首先，现在可以创建自定义单元格，这样就可以设置它们，使其具有所需的行为。我们将创建一个文本单元格类

MyTextCell

以显示网格中的文本，以及一个标题单元格类

SortHeaderCell

，我们可以单击它对列进行排序，并显示一个显示排序顺序的箭头。您还可以为电子邮件列添加自定义单元格类，以创建电子邮件地址链接

我将首先介绍分类，因为我认为它更难。这基本上使用了与文档中示例相同的方法

现在您拥有的数据只是一个数组，这很好。但是，文档使用DataListWrapper类，它有一个包含数据的

\u data

属性，另一个

\u indexMap

属性用于排序索引，所以让我们这样做（注意，如果您正在查看文档中的示例，我会对此做一些更改）：

您可以将前面提到的自定义单元格类型设置为无状态组件，如我们的自定义文本单元格：

 const MyTextCell = ({ rowIndex, field, data, ...props }) => {
    return (
        <Cell {...props}>
            {data.getObjectAt(rowIndex)[field]}
        </Cell>
    );
 }

以及反转排序类型的快速方法：

 const SortTypes = {
      ASC: 'ASC',
      DESC: 'DESC',
 };

  function reverseSortDirection(sortDir) {
      return sortDir === SortTypes.DESC ? SortTypes.ASC : SortTypes.DESC;
  }

需要注意的是，在标题中有一个

\onSortChange

方法，用于显示箭头并调用实际排序数据的方法，但该方法将位于实际的表组件中

在你的桌子上，你需要一些东西

在您的例子中，表数据是硬编码的，但最佳实践是通过道具传递。假设您通过属性获取数据，则需要相应地设置state，并设置默认排序索引（基本上是数据最初排序的方式）

现在，您可以这样设置列：

     <Column
            columnKey='country'
            header={
                <SortHeaderCell
                    onSortChange={this._onSortChange}
                    sortDir={colSortDirs.country}>
                    Country
                </SortHeaderCell>}
                cell={
                    <MyTextCell
                        data={this.state.sortedFilteredDataList}
                        field="country"
                     />
                }
                width={150}
       />

然后呈现搜索组件和表组件：

        <div>
            <div>
                <SearchBox onSearchTermChange={this.filterSearch} />
            </div>

            <br />
            <div className="row">
                <div>
                    <ResultsTable myDataArray={this.state.filteredData} />
                </div>
            </div>
        </div>

我的搜索框组件如下所示：

class SearchBox extends Component{
constructor(props) {
    super(props);

    
    this.state= {term: ''};
}

render() {
    return (
    <div>
     <input 
     value={this.state.term}
     onChange={(e)=>this.onInputChange(e.target.value)}></input>
   
    </div>
    )
}

onInputChange(term){
    this.setState({term});
    this.props.onSearchTermChange(term);
}
}
export default SearchBox;

类搜索框扩展组件{
建造师（道具）{
超级（道具）；
this.state={term:''}；
}
render（）{
返回(
this.onInputChange（e.target.value）}>
)
}
onInputChange（术语）{
this.setState（{term}）；
此.props.onSearchTermChange（术语）；
}
}
导出默认搜索框；

差不多就是这样。您还应该注意，现在不支持固定数据表，您应该使用fixed-data-table-2。也就是说，我在固定数据表中完成了上述所有操作，它应该可以工作

对于文档，官方文档为

---

不过，这些链接都是旧的示例，它们有一些bug。新的例子是

请注意：网站可以下载；链接可能会断开。而你的回答就变得毫无用处了。因此：避免只给出链接的答案，并至少给出一些细节。

componentWillReceiveProps(props) {
    this._defaultSortIndexes = [];
    var size = props.myDataArray.length;
    for (var index = 0; index < size; index++) {
        this._defaultSortIndexes.push(index);
    }
    this.setState({ myTableData: props.myDataArray, sortedFilteredDataList: new DataListWrapper(this._defaultSortIndexes, props.myDataArray) }) 
}

_onSortChange(columnKey, sortDir) {
    var sortIndexes = this._defaultSortIndexes.slice();
    sortIndexes.sort((indexA, indexB) => {
        var valueA = this.state.myTableData[indexA][columnKey];
        var valueB = this.state.myTableData[indexB][columnKey];
        var sortVal = 0;
        if (valueA > valueB) {
            sortVal = 1;
        }
        if (valueA < valueB) {
            sortVal = -1;
        }
        if (sortVal !== 0 && sortDir === SortTypes.ASC) {
            sortVal = sortVal * -1;
        }
        return sortVal;

    });

    this.setState({
        sortedFilteredDataList: new DataListWrapper(sortIndexes, this.state.myTableData),
        colSortDirs: {
            [columnKey]: sortDir,
        },
    });
}

     <Column
            columnKey='country'
            header={
                <SortHeaderCell
                    onSortChange={this._onSortChange}
                    sortDir={colSortDirs.country}>
                    Country
                </SortHeaderCell>}
                cell={
                    <MyTextCell
                        data={this.state.sortedFilteredDataList}
                        field="country"
                     />
                }
                width={150}
       />

filterSearch(searchTerm) {
    
    this.setState({
        filteredData: this.state.myData.filter(function (el) {
            return (el.propertyToFilter.includes(searchTerm) || !searchTerm);
        })
    });
}

        <div>
            <div>
                <SearchBox onSearchTermChange={this.filterSearch} />
            </div>

            <br />
            <div className="row">
                <div>
                    <ResultsTable myDataArray={this.state.filteredData} />
                </div>
            </div>
        </div>

class SearchBox extends Component{
constructor(props) {
    super(props);

    
    this.state= {term: ''};
}

render() {
    return (
    <div>
     <input 
     value={this.state.term}
     onChange={(e)=>this.onInputChange(e.target.value)}></input>
   
    </div>
    )
}

onInputChange(term){
    this.setState({term});
    this.props.onSearchTermChange(term);
}
}
export default SearchBox;