航行99 10週間WIL/ホームページ検索/無限スクロール

UnivBoard、freeBoardには検索ウィンドウがあります.
ホームページに検索ウィンドウがあります.
ホームページ上の検索ウィンドウを実現
無限スクロールもあります!
無限スクロールは実現していません...
バックエンドはuniverboard/freeBoard検索apiを実現した.
私が描いた风景に差し込めばいいだけの简単な...簡潔で意味がはっきりしている.
ジャガイモの金正浩には長い時間の仕事が必要だ.
他のapi接続とは異なり,無限スクロールのためにapi接続を検索するコンポーネント内で一度に実現した.

    //게시물 요청 정보
    const MainSearchQueryDB = {
        keyword: Keyword,
        pageSize: 10,
        pageNum: currentPage,
    };

    ///Main Search api 연결
    const MainSearchApi = async ({ keyword, pageSize, pageNum }) => {
        console.log(keyword, pageSize, pageNum);
        setIsLoading(true);
        await instance
            .get("util/search", {
                params: {
                    keyword,
                    pageSize,
                    pageNum,
                },
            })
            .then(res => {
                if (res.data.ok) {
                    console.log("main search response", res.data);
                    setSearchResult(prev => [...prev, ...res.data.result]);
                    setSearchResult(res.data.result);
                    setTotalPage(res.data.totalPage);
                    setNextPage(currentPage + 1);
                    setCurrentPage(prev => prev + 1);
                }
            });
        setIsLoading(false);
    };
    const nextCall = () => {
        MainSearchApi(MainSearchQueryDB);
    };
    const initialCall = async ({ keyword, pageSize, pageNum }) => {
        console.log(keyword, pageSize, pageNum);
        setIsLoading(true);
        await instance
            .get("util/search", {
                params: {
                    keyword,
                    pageSize,
                    pageNum,
                },
            })
            .then(res => {
                if (res.data.ok) {
                    console.log("main search response", res.data);
                    setSearchResult(res.data.result);
                    setTotalPage(res.data.totalPage);
                }
            });
        setIsLoading(false);
    };
    useEffect(() => {
        initialCall(MainSearchQueryDB);
    }, [Keyword]);

このようにapiに接続します!
Infinitieスクロールでは何も触ったことがないからです.
コードを調べてみます

import React, { useCallback, useEffect } from "react";
import _ from "lodash";

const InfinityScroll = props => {
    const { nextCall, children, is_loading, is_next, size } = props;
    const throttle = _.throttle(() => {
        let scrollHeight = document.documentElement.scrollHeight;
        let innerHeight = window.innerHeight;
        let scrollTop =
            (document.documentElement && document.documentElement.scrollTop) ||
            document.body.scrollTop;
        let current_height = scrollHeight - innerHeight - scrollTop;

        if (current_height < size) {
            if (is_loading) {
                return;
            }

            nextCall();
        }
    }, size);
    const throttle_callback = useCallback(throttle, [is_loading]);

    useEffect(() => {
        if (is_loading) {
            return;
        }
        if (is_next) {
            window.addEventListener("scroll", throttle_callback);
        } else {
            window.removeEventListener("scroll", throttle_callback);
        }

        return () => window.removeEventListener("scroll", throttle_callback);
    }, [is_loading, is_next]);
    return <>{children}</>;
};

InfinityScroll.defaultProps = {
    children: null,
    nextCall: () => {},
    is_next: false,
    is_loading: false,
};

export default InfinityScroll;