Как я могу отфильтровать дату между диапазоном дат в реагирующей таблице
Как я могу фильтровать данные таблицы на основе диапазона дат?
установка фильтра для столбца даты здесь:
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);
}
};
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы надеетесь, что у вас хорошо получается реагировать на хуки, или если вам нужна помощь, перейдите по ссылке ниже.
- https://reactjs.org/docs/hooks-reference.html
- 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, ниже приведена ссылка для использования чистого компонента в реакции,
Добавьте этот фильтр в соответствующий объект столбца
{
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») в вашем случае.