Javascript react数据网格中的基本过滤

我最近对“react data grid”进行了更多的探索，并尝试在我的react应用程序中使用基本过滤功能。这是我正在查看的基本过滤示例：

他们在codesandbox中的示例代码：

我将大多数代码构件示例复制到我的类组件中，并尝试为React的useState（）找到一个等效的解决方案（我对React非常陌生，useState显然在类中不可用）

我的代码在这个论坛上做了一些修改，它指向公共的JSONPlaceholder网站，用测试数据模拟来自真实服务器的RESTAPI调用。所以希望你能运行它。以下是我的App.js代码：

import React, { Component } from "react";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";

import "./App.css";
import "bootstrap/dist/css/bootstrap.css";

const defaultColumnProperties = {
  filterable: true,
  width: 120,
  editable: true
};

const columns = [
  { key: "id", name: "ID" },
  { key: "username", name: "Username" },
  { key: "email", name: "Email" }
].map(c => ({ ...c, ...defaultColumnProperties }));

function getRows(rows, filters) {
  const selectors = Data.Selectors;
  return selectors.getRows({ rows, filters });
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rows: [],
      isLoaded: false,
      filters: {},
      setFilters: {}
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          rows: json
        });
      });
  }

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };

  render() {
    // const [filters, setFilters] = useState({});
    const filteredRows = getRows(this.state.rows, this.state.filters);

    // Commenting ORIGINAL handleFilterChange example code temporarily
    // const handleFilterChange = filter => filters => {
    //   const newFilters = { ...filters };
    //   if (filter.filterTerm) {
    //     newFilters[filter.column.key] = filter;
    //   } else {
    //     delete newFilters[filter.column.key];
    //   }
    //   return newFilters;
    // };


    // Temporarily rewrote handleFilterChange function for DEBUGGING purpose and not using arrow fucntions
    // Used babeljs.io to generate non arrow based handleFilterChange function.
    var handleFilterChange = function handleFilterChange(filter) {
      debugger;
      console.log("handleFilterChange(filter)" + filter);

      return function(filters) {
        debugger;
        console.log("function(filters)" + filters);

        var newFilters = { ...filters };

        if (filter.filterTerm) {
          newFilters[filter.column.key] = filter;
        } else {
          delete newFilters[filter.column.key];
        }

        return newFilters;
      };
    };

    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => filteredRows[i]}
        rowsCount={filteredRows.length}
        minHeight={500}
        toolbar={<Toolbar enableFilter={true} />}
        onAddFilter={filter =>
          this.setState({ setFilters: handleFilterChange(filter) })
        }
        onClearFilters={() => this.setState({ setFilter: {} })}
      />
    );
  }
}
export default App;

没有人打电话。Chrome中的调试器没有达到断点，也没有打印出我添加的任何调试日志

始终调用此日志：

      console.log("handleFilterChange(filter)" + filter);

内部函数中的日志从未被调用，我认为这就是问题所在

       console.log("function(filters)" + filters);

当我在他们的示例中使用基于非箭头函数的handleFilterChange并替换了他们的handleFilterChange代码时，它可以工作，因此我相信代码本身是好的，所有调试日志都显示在控制台中。内部函数也会被调用。很高兴使用箭头功能，但如果我可以得到一些帮助，使这项工作

我还编写了一个不基于类的基本过滤器版本，但在从服务器加载相当大的JSON数据时遇到了问题。没有进一步调查，但我认为这是一个时间问题

由于这个问题，表格被加载到浏览器中，我可以按下右上角的“过滤行”按钮。这将向下折叠搜索编辑框，我可以输入字母，但在输入字母时表格不会被动态过滤。

手过滤器更换（过滤器）{
让newFilters=Object.assign（{}，this.props.filters）；
if（filter.filterTerm）{
newFilters[filter.column.key]=过滤器；
}否则{
删除newFilters[filter.column.key]；
}
this.setState（{filters:newFilters}）；
}

       console.log("function(filters)" + filters);