Javascript React固定数据表：未捕获类型错误：this.\u dataList.getSize不是函数

我正试图让React开发人员使用它来为一个表创建一个搜索过滤器

我的表可以静态地处理来自后端的数据。我已经取出了一个“样本”数据数组，以使搜索功能正常工作。但是我很难理解他们是如何使用“假数据”来填充他们的表的，而不是像我想的那样“仅仅”用测试数组填充它

这是我的源代码。我想过滤“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

类DataListWrapper{
构造函数（indexMap，数据）{
这个.\u indexMap=indexMap；
这个。_data=数据；
}
getSize（）{
返回此值。\u indexMap.length；
}
getObjectAt（索引）{
返回此。\u data.getObjectAt(
此._indexMap[索引]，
);
}
}
类NameTable扩展了React.Component{
建造师（道具）{
超级（道具）；
this.testDataArr=[]；//数组。
this._dataList=this.testDataArr；
console.log（JSON.stringify（this._dataList））；//它正确地打印数组。
此.state={
filteredDataList:new DataListWrapper（[]，this.\u dataList）
};
this.\u onFilterChange=this.\u onFilterChange.bind（this）；
}
_onFilterChange（e）{
如果（！e.target.value）{
这是我的国家({
filteredDataList:此.\u数据列表，
});
}
var filterBy=e.target.value；
var size=this.\u dataList.getSize（）；
var filteredIndexes=[]；
对于（var索引=0；索引<大小；索引++）{
var{firstName}=this.\u dataList.getObjectAt（索引）；
if（firstName.indexOf（filterBy）！=-1）{
filteredIndexes.push（索引）；
}
}
这是我的国家({
filteredDataList:new DataListWrapper（FilteredIndex，this.\u dataList），
});
}
render（）{
var filteredDataList=this.state.filteredDataList；
如果（！Filteredatalist）{
返回加载表；
}
var rowscont=filteredDataList.getSize（）；
返回(
{/*这里有一个表，在没有搜索过滤器的情况下正常呈现。*/}
);
}
}
导出默认名称表

您的问题在过滤器更改方法中

您正在这样做：

var size = this._dataList.getSize();

this.\u dataList

只是一个数组，这就是为什么该对象中不存在getSize（）

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

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

同样的情况也会发生在循环内部，您正在执行以下操作：

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

当您应该这样做时：

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

您的_onFilterChange方法应该如下所示：

\u过滤器更改（e）{
如果（！e.target.value）{
这是我的国家({
filteredDataList:此.\u数据列表，
});
}
var filterBy=e.target.value；
//var size=this.\u dataList.getSize（）；
var size=this.state.filteredDataList.getSize（）；
var filteredIndexes=[]；
对于（var索引=0；索引<大小；索引++）{
//var{firstName}=this.\u dataList.getObjectAt（索引）；
var{firstName}=this.state.filteredDataList.getObjectAt（索引）；
if（firstName.indexOf（filterBy）！=-1）{
filteredIndexes.push（索引）；
}
}
这是我的国家({
filteredDataList:new DataListWrapper（FilteredIndex，this.\u dataList），
});
}

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

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

最初的演示之所以有效，是因为FakeObjectDataListStore数据是一个对象（“FakeObjectDataListStore”），它实现了getSize和getObjectAt方法）

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

FixedDataTable的酷之处在于它能够浏览大型列表，

---

开发人员可以编写自己的自定义单元格渲染器，例如在列表行的任何位置显示进度条、按钮或菜单。

很抱歉告诉您，您做得不对。首先，当您可以将对象存储在类中时，以状态存储对象是非常糟糕的。您应该在您的状态中存储：dataListLoaded。当你的数据列表被加载时，你必须创建一个setState（datalistloadded:true）来重新加载你的组件。如果你能提供一个你提到的东西的代码示例，我很乐意对它进行测试。为了找到在es6和react中编写代码的好方法，我看了以下内容：以及一些好的类库材料的源代码-ui@cbll你测试过我的答案吗？效果好吗？