0

我正在尝试实现 Facebook 的“过滤器示例”，显示在这里，源代码在这里。

filteredDataList.getSize()对于被调用的状态，我遇到了一个奇怪的错误。Chrome 中的控制台声明：Uncaught TypeError: filteredDataList.getSize is not a function

我已经更改了输入数据，因为 Facebook 使用外部类，使用 Javascript 映射（我也尝试使用数组），但它似乎与定义的class DataListWrapper位置有关？getSize

这是我的源代码：

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

为了简单起见，我已经更改了几列，但在开始时，我的示例在填充没有过滤状态的表时效果很好。只有在添加过滤器示例状态后它才开始抛出此错误 - 它与DataListWrapper类有关。

4

0 回答 0