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} Без двойного рендера сделать этого у меня не получается, и есть баг, если я подгружаю элементы по этому запросу именно по сабмиту форму, то при скролле до конца страницы не рендерится последняя пачка элементов из апи, этому я вообще не могу дать объяснения


Ответы (0 шт):