Question

我正在尝试使用React开发人员为this example制作表格的搜索过滤器。

我的表格可以正常处理来自我后端的数据。我已经为“样本”数据取出了一个数组，以使搜索功能正常工作。但是我很难绕过他们如何使用“假数据”将他们的表填充为seen here，而不是“只是”用我想要的测试数组填充它。

这是我的源代码。我想过滤“firstName”列，就像Facebook的例子一样（为简单起见）。该错误源于调用getSize（）时...但我怀疑问题是另一回事。

class DataListWrapper {
    constructor(indexMap, data) {
        this._indexMap = indexMap;
        this._data = data;
    }

    getSize() {
        return this._indexMap.length;
    }

    getObjectAt(index) {
        return this._data.getObjectAt(
            this._indexMap[index],
        );
    }
}

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

        this.testDataArr = []; // An array.
        this._dataList = this.testDataArr;

        console.log(JSON.stringify(this._dataList)); // It prints the array correctly.


        this.state = {
            filteredDataList: new DataListWrapper([], this._dataList)
        };

        this._onFilterChange = this._onFilterChange.bind(this);
    }

    _onFilterChange(e) {
        if (!e.target.value) {
            this.setState({
                filteredDataList: this._dataList,
            });
        }

        var filterBy = e.target.value;
        var size = this._dataList.getSize();
        var filteredIndexes = [];
        for (var index = 0; index < size; index++) {
            var {firstName} = this._dataList.getObjectAt(index);
            if (firstName.indexOf(filterBy) !== -1) {
                filteredIndexes.push(index);
            }
        }

        this.setState({
            filteredDataList: new DataListWrapper(filteredIndexes, this._dataList),
        });
    }

    render() {

        var filteredDataList = this.state.filteredDataList;


        if (!filteredDataList) {
            return <div>Loading table..  </div>;
        }

        var rowsCount = filteredDataList.getSize();



        return (
            <div>
                <input onChange={this._onFilterChange} type="text" placeholder='Search for first name.. ' />
                {/*A table goes here, which renders fine normally without the search filter. */}
            </div>
        );
    }
}

export default NameTable

Answer 1

您的问题出在_onFilterChange方法中。

你这样做：

var size = this._dataList.getSize();

this._dataList只是一个数组，这就是该对象中不存在getSize（）的原因。

如果我没有误导，你应该这样做：

var size = this.state.filteredDataList.getSize();

循环中会发生同样的事情，你这样做：

var {firstName} = this._dataList.getObjectAt(index);

你应该这样做：

var {firstName} = this.state.filteredDataList.getObjectAt(index);

你的_onFilterChange方法应如下所示：

_onFilterChange(e) {
    if (!e.target.value) {
      this.setState({
        filteredDataList: this._dataList,
      });
    }

    var filterBy = e.target.value;
    //var size = this._dataList.getSize();
    var size = this.state.filteredDataList.getSize();
    var filteredIndexes = [];
    for (var index = 0; index < size; index++) {
      //var {firstName} = this._dataList.getObjectAt(index);
      var {firstName} = this.state.filteredDataList.getObjectAt(index);
      if (firstName.indexOf(filterBy) !== -1) {
        filteredIndexes.push(index);
      }
    }

    this.setState({
      filteredDataList: new DataListWrapper(filteredIndexes, this._dataList),
    });
}

Answer 2

getSize（）和getObjectAt（）只能在实现这些方法的数据对象上调用，例如DataListWrapper对象。

如果将普通数据数组传递给render（），则它不提供getSize（）和getElementAt（）方法，并且对方法的调用将失败。

原始演示有效，因为FakeObjectDataListStore数据是一个实现getSize和getObjectAt方法的对象（'FakeObjectDataListStore'）。

最简单的集成是确保传入的数据是提供这些方法的对象。基于我在'examples / FilterExample'的案例中，我发现最简单的集成（在与许多不好的之后挣扎）是将现有的'helpers / FakeObjectDataListStore.js'变成我自己的helpers / ObjectDataListStore.js（或选择你的名字）从而在整个设计中保留现有的方法包装结构和尺寸参数。然后我简单地用对我自己的非包装本地列表行数组的引用替换了对'fake'组件的调用。您可以将本地数据安排为静态数据，也可以从您使用的任何数据库环境中动态加载。然后很容易修改_setFiltered（）方法来过滤除'firstName'之外的其他内容。

FixedDataTable很酷的是它能够浏览大型列表，并且开发人员可以编写自己的自定义单元格渲染器，例如在列表行的任何位置显示进度条，按钮或菜单。

React fixed-data-table：Uncaught TypeError：this._dataList.getSize不是函数

2 个答案: