nextJS, рендер элементов из api с подгрузкой по скроллу
const PostsWrapper = () => {
const [posts, setPosts] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [fetching, setFetching] = useState(true);
const [searchFetching, setSearchFetching] = useState(false);
const [totalCount, setTotalCount] = useState(0);
const [loading, setLoading] = useState(true);
const [selectedPost, setSelectedPost] = useState({});
const [postPopupOpened, setPostPopupOpened] = useState(false);
const [isRows, setIsRows] = useState(false);
const [searchValue, setSearchValue] = useState('');
useEffect(() => {
console.log(searchFetching)
}, [searchFetching])
useEffect(() => {
if (fetching) {
setLoading(true);
axios.get(`https://jsonplaceholder.typicode.com/photos?_limit=20&_page=${currentPage}`)
.then(res => {
setPosts([...posts, ...res.data]);
setCurrentPage(prev => prev + 1);
setTotalCount(res.headers['x-total-count']);
setLoading(false);
})
.finally(() => setFetching(false));
}
}, [fetching]);
//`https://jsonplaceholder.typicode.com/photos?_limit=20&_page=${currentPage}&q=${searchValue}`
useEffect(() => {
const scrollHandler = (e) => {
if (e.target.documentElement.scrollHeight -
(e.target.documentElement.scrollTop + window.innerHeight) <
10 && posts.length < totalCount && searchValue==='') {
setFetching(true);
}
};
document.addEventListener('scroll', scrollHandler);
return () => {
document.removeEventListener('scroll', scrollHandler);
};
}, [posts, totalCount, searchValue]);
const handlePostClick = (post) => {
setSelectedPost(post);
setPostPopupOpened(true);
document.body.style.overflow = 'hidden';
}
const closePopup = () => {
setPostPopupOpened(false);
document.body.style.overflow = 'auto';
}
const handleChangeView = () => {
setIsRows(!isRows);
}
const handleSearchChange = (e) => {
setSearchValue(e.target.value);
}
const handleFormSubmit = (e) => {
e.preventDefault();
};
return (
<>
<Header
onInputChange={handleSearchChange}
searchValue={searchValue}
setSearchValue={setSearchValue}
onFormSubmit={handleFormSubmit}
/>
<PageWrapper>
<ViewButtonsContainer>
<ViewButtonRows onClick={handleChangeView} $isRows={isRows}></ViewButtonRows>
<ViewButtonCells onClick={handleChangeView} $isRows={isRows}></ViewButtonCells>
</ViewButtonsContainer>
<Posts posts={posts} onPostClick={handlePostClick} $isRows={isRows}/>
<PostPopup $isOpen={postPopupOpened} post={selectedPost} onClose={closePopup}/>
{loading && <Preloader />}
</PageWrapper>
</>
);
}
В этом компоненте мне нужно подгружать данные по сабмиту формы с такого запроса: https://jsonplaceholder.typicode.com/photos?_limit=20&_page=${currentPage}&q=${searchValue}
Без двойного рендера сделать этого у меня не получается, и есть баг, если я подгружаю элементы по этому запросу именно по сабмиту форму, то при скролле до конца страницы не рендерится последняя пачка элементов из апи, этому я вообще не могу дать объяснения