反应无限加载数据，直到数据从后端到达——每个请求都会收到固定数据

Question

我有一个具有无限加载功能的反应组件，每次我向后端发出请求时，我都会修复大约 13 条记录。我只需要将页码发送到后端以获取数据，并且只有数据来自该特定页码的后端。我需要在加载数据或直到数据存在时向下滚动时显示加载微调器。我写了一些代码，但它不能完美运行。任何指导表示赞赏。我是react的大一新生，迷路了

const TableBody = (props) => {
      const [page, setPage] = useState(1);
      const [manifestList, setManifestList] = useState([]);
      const [initialmanifestLength, setInitialmanifestLength] = useState();
      const [normalManifestList, setNormalManifestList] = useState([]);
      const [isFetching, setIsFetching] = useState(false);

      useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
      }, []);

      function getManifests(pageNo){
        setIsFetching(true);
        if(pageNo == 1)
        {
          axios.get(props.urls.list, { params: { page: pageNo } }).then(res => {
            setManifestList([...manifestList, ...res.data]);
            setNormalManifestList(res.data);
            setInitialmanifestLength(res.data.length);
            setIsFetching(false)
          });
        }
        else{
          axios.get(props.urls.list, { params: { page: pageNo } }).then(res => {
            setManifestList([...manifestList, ...res.data]);
            setNormalManifestList(res.data);
            setIsFetching(false)
          });
        }

      }

      useEffect(() => {
        getManifests(page);
      }, []);

      useEffect(() => {
        if (!isFetching) return;
          getManifests(page);
      }, [page, isFetching]);

      function handleScroll() {
        if (
          window.innerHeight + document.documentElement.scrollTop !==
            document.documentElement.offsetHeight ||
          isFetching
        )
          return;
        let pageNo = page + 1;
        setPage(pageNo);
        // setIsFetching(true);
        setIsFetching(initialmanifestLength === normalManifestList.length);
      }



      return (
        <div>
          {
            manifestList.map(function(manifest) {
              return (
                <p>{manifest.title}</p>
                )
              }
          }

         //loading spinners
          {isFetching && manifestList.length < manifests.length && (
            <div>
               <LoadingIcon />
            </div>
          )}
         </div>
      )
  }

Answer 1

您需要： - 分离组件和容器。 - useRef 和 IntersectionObserver

https://www.youtube.com/watch?v=GVDiw3lAyp0

或者您可以使用库：https://www.npmjs.com/package/react-infinite-scroller

反应无限加载数据，直到数据从后端到达——每个请求都会收到固定数据

React infinite loading of data till data is there from backend--fixed data is coming on every request

javascript

reactjs

infinite-scroll

infinite