在没有库的React表格中进行多重过滤(React-table)，使用react-hooks。

Question

我有一个按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>
  );
}

Answer 1

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

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