如何筛选出反应表中日期范围之间的日期

Question

如何根据日期范围筛选表数据？

在此处设置筛选日期列：

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

Answer 1

将此筛选器添加到相应的列对象

{
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"的所有日期(。

Answer 2

如果希望你擅长钩子的react概念，或者如果你需要帮助，请按照下面的链接

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的状态您将在下面给出的表中添加挂钩以设置值，

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

此外，还需要记住的一点是，不要在任何状态变化时盲目调用API，即，是否有任何值从原始状态中的值真正改变了这里你必须知道纯组件的概念，以防止你的组件盲目调用API，下面是在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