Open kaydeniz opened 1 year ago
@kaydeniz can you explain in detail? couldn't get your point.
` 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.
@ashutosh1919 Hi, Have you had a chance to look into the problem?
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?