Как можно сделать поиск, если у меня имеется
бесконечный скролл на странице? Axios запрос выводит мне 10 постов, в моменте когда я "просматриваю" 10 пост, он мне выдает еще 10 постов. Так вот, у меня есть строка поиска и еще
несколько параметров, по которым я хочу
фильтровать получение постов от сервера. Как это возможно реализовать? Если коротко, то я хочу, чтоб если поисковая строка или один из чекбоксов был пуст, то мне выводились все посты подряд, а если что то из этого заполнено, то выводились посты именно по этим критериям. Вот код, который я имею на данный момент:
const [limit, setLimit] = useState(10);
const [data, setData] = useState([]);
const [fetching, setFetching] = useState(true);
const [text, setText] = useState(null);
useEffect(() => {
if(fetching){
console.log('fetching');
axios.get(`http://localhost:3500/api/posts?limit=${limit}`)
.then(response => {
setData(response.data.values)
setLimit(prevState => prevState + 10)
})
.finally(() => setFetching(false));
}
}, [fetching])
useEffect(() => {
document.addEventListener('scroll', scrollHandler)
return function(){
document.removeEventListener('scroll', scrollHandler)
}
})
const scrollHandler = (e) => {
if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 100){
console.log('scroll');
setFetching(true);
}
}
return (
<>
{data.map(result => {
<span>{result.name}</span>
<span>{result.text}</span>
<span>{result.category}</span>
<span>{result.date}</span>
})}
</>
);
