使用 react-hooks 在没有库的 React 表（React-table）中进行多重过滤答案

【问题标题】：Multiple Filtering in React table without libraries (React-table) with react-hooks使用 react-hooks 在没有库的 React 表（React-table）中进行多重过滤
【发布时间】：2020-06-08 09:13:04
【问题描述】：

我有一个按 id 和 firstName 的过滤器 - 但我怎样才能将它们一起使用？如何将相互关联的 3-4-5 个过滤器一起使用？当我清除过滤器时 - 它们无法正常工作当我清除第二个过滤器时，如何获得第一个过滤器的结果，反之亦然。最佳做法是什么？

表格视图：

    import React, { useState, useEffect, useCallback, useMemo } from "react";
    import BootstrapTable from "./BootstrapTable";
    import useFetchHook from "../useFetchHook";

    export default function BootstrapTableContainer() {
    const [filterValue, setFilterValue] = useState("");
    const [idFilter, setIdFilter] = useState("all");
    const [firstNameFilter, setFirstNameFilter] = useState("");
    const [data, loading, error, setError] = useFetchHook(
    `http://www.filltext.com/?rows=${20}&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&category=[1,2]&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}`,
    []
  );
  const [dataTable, setDataTable] = useState(data);

  const setFilterId = useCallback((value) => {
    setIdFilter(value);
  }, [setIdFilter]);

  const setFilterFirstName = useCallback((value) => {
    setFirstNameFilter(value);
  }, [setFirstNameFilter]);


  useEffect(() => {
    let newData;
    switch (idFilter) {
      case "all":
        newData = [...dataTable];
        break;
      case "0":
        newData = dataTable.filter((obj) => {
          return obj.id >= 0 && obj.id < 300;
        });
        break;
      case "300":
        newData = dataTable.filter((obj) => {
          return obj.id >= 300 && obj.id < 600;
        });
        break;
      case "600":
        newData = dataTable.filter((obj) => {
          return obj.id >= 600 && obj.id <= 1000;
        });
        break;
      default:
        break;
    }
    if (!firstNameFilter) {
       newData = [...newData]
    } else {
       newData = newData.filter((obj) => {
        return obj.firstName
          .toLowerCase()
          .includes(firstNameFilter.toLowerCase());
      });

    }
    setDataTable(newData);
  }, [idFilter, setDataTable, firstNameFilter]);


  const bootstrapTable = useMemo(() => {
    return (
      <BootstrapTable
        idFilter={idFilter}
        setFilterId={setFilterId}
        firstNameFilter={firstNameFilter}
        setFilterFirstName={setFilterFirstName}
        data={dataTable}
      />
    );
  }, [dataTable, idFilter, setFilterId, firstNameFilter, setFilterFirstName]);



  return (
    <div>
      {bootstrapTable}
    </div>
  );
}

【问题讨论】：

我会推荐你使用 react-querybuilder。 github.com/sapientglobalmarkets/react-querybuilder
谢谢，但我尝试在没有库的情况下完成任务）
这是一个好方法，react-querybuilder 它只是一个带有多个过滤条件的 ui/ux 示例。好的，我会尝试在回答中向您解释。

标签： reactjs filter react-table

【解决方案1】：

你有这么简单的状态属性来解决你的问题。我也会写一些想法给你

import React, { useState, useEffect, useCallback, useMemo } from "react";
import BootstrapTable from "./BootstrapTable";
import useFetchHook from "../useFetchHook";

const filterById = (dataTable, value) => {
  switch (value) {
    case "0":
      return dataTable.filter((obj) => {
        return obj.id >= 0 && obj.id < 300;
      });

    case "300":
      return dataTable.filter((obj) => {
        return obj.id >= 300 && obj.id < 600;
      });

    case "600":
      return dataTable.filter((obj) => {
        return obj.id >= 600 && obj.id <= 1000;
      });

    case "all":
      return [...dataTable];
  }
};

export default function BootstrapTableContainer() {
  const [filters, setFilters] = useState([]);
  const [data, loading, error, setError] = useFetchHook(
    `http://www.filltext.com/?rows=${20}&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&category=[1,2]&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}`,
    []
  );
  const [dataTable, setDataTable] = useState(data);

  useEffect(() => {
    let newData = dataTable;
    filters.forEach(({ name, value }) => {
      switch (name) {
        // here we filter by id
        case "id":
          newData = filterById(newData, value);
          break;

        // here we filter by firstname
        case "firstname":
          // newData = filterByFirstName(newData, value);
          break;

        // ...

        default:
          break;
      }
    });
    setDataTable(newData);
  }, [filters]);

  const bootstrapTable = useMemo(() => {
    return (
      <BootstrapTable
        filters={filters}
        handleFilterChandge={(e) => {
          // e - input event onChange:
          // <input name="firstname"
          //   onChange={props.handleFilterChandge}
          //   value={props.filters.firstname} 
          // />
          // 
          setFilters([
            ...filters,
            { name: e.target.name, value: e.target.value },
          ]);
        }}
        data={dataTable}
      />
    );
  }, [dataTable, filters]);

  return <div>{bootstrapTable}</div>;
}

【讨论】：