反應數據網格中的基本過濾

Question

我最近正在更多地探索“react-data-grid”，並試圖讓基本過濾功能在我的 React 應用程序中發揮作用。 這是我正在查看的他們的基本過濾示例：

http://adazzle.github.io/react-data-grid/docs/examples/column-filtering

他們在 codesandbox 中的示例代碼： https ://codesandbox.io/s/w6jvml4v45?from-embed

我將大部分代碼工件示例復制到我的類組件中，並試圖找到 React 的 useState() 的等效解決方案（我對 React 很陌生，而且 useState 顯然在類中不可用）。

我的代碼已針對此論壇進行了輕微修改，並指向公共 JSONPlaceholder 網站，以模擬來自具有測試數據的真實服務器的 REST API 調用。 所以希望你能運行它。 這是我的 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;

根據上面代碼示例中的注釋，我使用 babeljs.io 生成了一個非基於箭頭的 handleFilterChange 函數，並添加了一些日志和調試語句

由於某種原因，嵌套函數：

  return function(filters) {
    var newFilters = {
      ...filters
    };

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

不會被調用。 Chrome 中的調試器沒有達到斷點或打印出我添加的任何調試日志。

這個日志總是被稱為：

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

內部函數中的這個日志永遠不會被調用，我認為這是問題所在？

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

當我在他們的示例中使用基於非箭頭函數的 handleFilterChange 並替換了他們的 handleFilterChange 代碼時，它可以工作，所以我相信代碼本身沒有問題，所有調試日志都出現在控制台中。 內部函數也被調用。 很高興使用箭頭功能，但如果我能得到一點幫助來讓它工作的話。

我還編寫了一個非基於類的 Basic Filter 版本，但是在從服務器加載相當大的 JSON 數據時遇到了問題。 沒有進一步調查，但我認為這是一個時間問題。

由於這個問題，表格被加載到瀏覽器中，我可以按下右上角的“過濾行”按鈕。 這將折疊搜索編輯框，我可以輸入字母，但在輸入字母時不會即時過濾表格。

Answer 1

    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 });
    }