Question

我试图实施＆＃34;过滤器示例＆＃34;通过Facebook显示here，源代码为here.

我为调用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类相关。

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

0 个答案: