如何过滤掉反应中日期范围之间的日期-table

How can I filter out a date between a range of date in a react-table

如何根据日期范围过滤 table 数据?

在此处将过滤器设置为日期列:

const tableInstance = useRef(null);
  const filterTable = (dates) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('session_date', dates);
    }
  };

onClick 功能在这里:

const handleFilter = () => {
    setSessionsData(data);
    if (sessionsData) {
      const dateArray = getDates(
        moment(fromDate).format('L'),
        moment(toDate).format('L')
      );
      filterTable(dateArray);
    }
  };

如果你对钩子的 React 概念很熟悉,或者如果你需要帮助,请遵循以下 link

  1. https://reactjs.org/docs/hooks-reference.html
  2. https://www.digitalocean.com/community/tutorials/how-to-call-web-apis-with-the-useeffect-hook-in-react

现在回答你的问题,你必须采取的方法。 您已对两个状态值进行过滤,即您的 date_range.

您只需传递过滤器点击事件即可更新 date_range 的状态 您将在 table 中添加挂钩以设置值的位置,如下所示,

const [list, setList] = useState([]);

  useEffect(() => {
     fetch('http://localhost:3333/list')
   .then(data => {
       setList(data.json);
    })
   })
 }, [])

此外,还有一件事要记住,不要盲目地调用 API 任何状态变化,即,是否有任何值真正从状态中的原始值发生变化,你必须知道的概念纯组件防止组件盲目调用API,下面是link在react中使用纯组件,

  1. https://reactjs.org/docs/react-api.html
  2. https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks

将此过滤器添加到您各自的列对象中

{
  id: 'your_column_id',
  accessor: 'your_accessor',
  filter: (rows, id, filterValue) => {
    return rows.filter(
      (row) =>
        filterValue.length <= 0 ||
        !filterValue ||
        filterValue.includes(row.values[id])
    );
  }
}

此处的 filterValue 包含包含所有可能匹配项的数组,即 dateArray(从 'fromDate' 到 'toDate' 的所有日期)。