Javascript 组件上的React数据网格过滤器

我正在尝试创建一个名为table的组件，以便可以重用它。我将行和列作为属性传递给父对象。一切正常，它显示行和列，它显示过滤器，但当我在过滤器上输入一些值时

它给了我这个错误：

当我定义组件的状态和属性时，可能我采取了错误的方法

如何在react数据网格组件中实现过滤器

我的代码是：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactDataGrid from 'react-data-grid';
const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons');
import * as dashboardActions from '../actions/dashboardActions';

export default React.createClass({

  getInitialState() {
    return {  filters: {} };
  },


  getRows() {
    var newProps = {};
    newProps.filters = this.state.filters;
    newProps.rows = this.props.rows;
    return Selectors.getRows(newProps);
  },

  rowGetter(rowIdx) {
    let rows = this.getRows();
    return rows[rowIdx];
  },

  getSize() {
    return this.getRows().length;
  },


  handleFilterChange(filter) {

    let newFilters = Object.assign({}, this.props.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }    
    this.setState({ filters: newFilters });
  },

  render() {
    const { rows, columns, filters } = this.props;



    return (
      <div>
        <ReactDataGrid
          columns={columns}
          minHeight={600}
          rows={rows}
          rowGetter={this.rowGetter}
          rowsCount={rows.length}
          rowHeight={35}
          enableDragAndDrop
          toolbar={<Toolbar enableFilter={true} />}
          onAddFilter={this.handleFilterChange}

        />
      </div>
    );
  }
});

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“react数据网格”导入ReactDataGrid；
const{Toolbar，Data:{Selectors}}=require（'react-Data-grid-addons'）；
从“../actions/dashboardActions”导入*作为dashboardActions；
导出默认的React.createClass({
getInitialState（）{
返回{过滤器：{}；
},
getRows（）{
var newProps={}；
newProps.filters=this.state.filters；
newProps.rows=this.props.rows；
返回选择器.getRows（newProps）；
},
rowGetter（rowIdx）{
让rows=this.getRows（）；
返回行[rowIdx]；
},
getSize（）{
返回此.getRows（）.length；
},
手过滤器更换（过滤器）{
让newFilters=Object.assign（{}，this.props.filters）；
if（filter.filterTerm）{
newFilters[filter.column.key]=过滤器；
}否则{
删除newFilters[filter.column.key]；
}    
this.setState（{filters:newFilters}）；
},
render（）{
const{rows，columns，filters}=this.props；
返回(
);
}
});

问题在于

rowsCount

引用了完整的行集，这意味着

rowGetter

将尝试获取未包含在筛选器中的行。如果你看看，你会发现你需要

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

及

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

rowsCount={this.getSize()}