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

我正试图实现Facebook的“过滤器示例”，如图所示，源代码如下所示

对于调用

Filteredatalist.getSize（）

的状态，我遇到了一个奇怪的错误。Chrome中的控制台声明：

uncaughttypeerror:filteredDataList.getSize不是函数

我已经更改了输入数据，因为Facebook使用了一个外部类，带有Javascript映射（我也尝试了使用数组），但它似乎与定义了

getSize

的

类DataListWrapper

有关

以下是我的源代码：

var FixedDataTable = require('fixed-data-table');
var React = require('react');

const {Table, Column, Cell} = FixedDataTable;

const TextCell = ({rowIndex, data, col, ...props}) => (
    <Cell {...props}>
        {data[rowIndex][col] ? data[rowIndex][col] : " "}
    </Cell>
);

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 TableWithIPs extends React.Component {
    constructor(props) {
        super(props);

        var testdatamap = // A map that corrosponds with the cols in the table goes here - it will render the table correctly without the filter example stuff. 


        this._dataList = testdatamap;
        this.state = {
            filteredDataList: 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 {hostAddr} = this._dataList.getObjectAt(index);
            if (hostAddr.indexOf(filterBy) !== -1) {
                filteredIndexes.push(index);
            }
        }

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

    render() {
        var {filteredDataList} = this.state;

        if (!this.props.data) {
            return <div>Loading data, please wait..  </div>;
        }

        });

        return (
            <div>
                <input onChange={this._onFilterChange} type="text" placeholder='Search for ip. ' />
                    <Table
                           height={600}
                           width={675}
                           rowsCount={filteredDataList.getSize()} // This is where the error points to. 
                           rowHeight={80}
                           headerHeight={30}
                           {...this.props}>
                        <Column
                            header={<Cell>Host</Cell>}
                            cell={<TextCell data={filteredDataList} col="hostAddr" />}
                            fixed={true}
                            width={100}
                        />
                        <Column
                            header={<Cell>OS</Cell>}
                            cell={<TextCell data={filteredDataList} col="osType" />}
                            width={75}
                        />
                        <Column
                            header={<Cell>Version</Cell>}
                            cell={<TextCell data={filteredDataList} col="osVersion" />}
                            width={75}
                        />
                    </Table>
            </div>
        );
    }
}



export default TableWithIPs

var FixedDataTable=require（'fixed-data-table'）；
var React=要求（'React'）；
const{Table，Column，Cell}=FixedDataTable；
const TextCell=（{rowIndex，data，col，…props}）=>(
{data[rowIndex][col]？data[rowIndex][col]：“”
);
类DataListWrapper{
构造函数（indexMap，数据）{
这个.\u indexMap=indexMap；
这个。_data=数据；
}
getSize（）{
返回此值。\u indexMap.length；
}
getObjectAt（索引）{
返回此。\u data.getObjectAt(
此._indexMap[索引]，
);
}
}
类TableWithIPs扩展了React.Component{
建造师（道具）{
超级（道具）；
var testdatamap=//与表中的col对应的映射出现在这里-它将正确地呈现表，而不使用过滤器示例内容。
这是._dataList=testdatamap；
此.state={
filteredDataList:此.\u数据列表，
};
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{hostAddr}=this.\u dataList.getObjectAt（index）；
if（主机地址索引of（过滤器比）！=-1）{
filteredIndexes.push（索引）；
}
}
这是我的国家({
filteredDataList:new DataListWrapper（FilteredIndex，this.\u dataList），
});
}
render（）{
var{filteredDataList}=this.state；
如果（！this.props.data）{
返回加载数据，请稍候；
}
});
返回(
);
}
}
导出默认表WithIPS

---

为了简单起见，我已经更改了一些列，但是从一开始，我的示例在填充表时没有过滤状态，效果很好。只有在添加过滤器示例后，它才声明它开始抛出此错误，并且它与

DataListWrapper

类相关

在第一次呈现FilteredataList时，它来自于状态，是testdatamap。看起来testdatamap没有getSize（）方法。这意味着数据结构错误？它当前是一个映射-那么它可能应该是一个数组？我尝试将地图转换为数组。但是它仍然会产生相同的错误。我刚刚尝试过调试，它甚至在控制台中正确打印了地图，但在移动超过断点后会出现此错误。。看起来很奇怪。@cbll你解决了吗？到目前为止，在这个代码示例中，只有“FakeObjectDataListStore”数据适用于我。@GunnarForsgren Mobimation从固定数据表中运行，他们不再维护它。我已经迁移到React表，它响应速度快，实现起来容易很多倍。