ashutosh1919 / react-lazy-load

Lazy loading in react
MIT License
50 stars 26 forks source link

Problem at the end of List #1

Open kaydeniz opened 1 year ago

kaydeniz commented 1 year ago

Hi, I made a page with an infinite loop structure in my project by using your project. but when I come to the end of the list, it still works as if there is an element in the list and tries to load it. Can we put a limit on lazyLoad?

ashutosh1919 commented 1 year ago

@kaydeniz can you explain in detail? couldn't get your point.

kaydeniz commented 1 year ago

` import {getQuestionDetailsInTest} from "../../../../../_apis/addQuestionApi/addQuestionApi"; import useLazyLoad from "../utils/lazyLoad"; import {Stack} from "@mui/material"; import QuestionView from "./QuestionView/QuestionView"; import clsx from "clsx"; import React, {useRef} from "react"; import CircularProgress from "@mui/material/CircularProgress"; import PropTypes from "prop-types";

function LazyComponent(props) { const {questionList} = props; const triggerRef = useRef(null); const onGrabData = (currentPage) => { const param = {questionIds: [questionList[currentPage].questionId]} return new Promise((resolve) => { let data = {} getQuestionDetailsInTest(param, (responseData) => { data = responseData }, () => { } ).then(() => resolve(data)) }); };

const {data, loading} = useLazyLoad({triggerRef, onGrabData});

return (
    <Stack spacing={2}>
        {data.map(question => {
            return <QuestionView key={question.questionId} questionData={question}/>
        })}
        <div ref={triggerRef} className={clsx("trigger", {visible: loading})}>
            <div className='loading-circular'>
                <CircularProgress/>
            </div>
        </div>
    </Stack>
);

}

LazyComponent.propTypes = { questionList: PropTypes.array };

export default LazyComponent; ` I prepared the above component to show the questions in my project. As I scroll down on the page, I call a question and display the incoming data. I also show the last question in the list, but still onGrabData works as if there is a question in the list and I get an error. I wonder if I have to limit the size of my list in the useLazyLoad hook.

kaydeniz commented 1 year ago

@ashutosh1919 Hi, Have you had a chance to look into the problem?