通过React中的提取API通过滚动页面显示更多项目

问题描述

我要在滚动页面时显示新信息。我使用状态更新来做到这一点。我希望首先从服务器接收并显示信息，然后滚动要从服务器接收并显示在先前信息下方的新信息，然后重复此操作。

为此我做了很多尝试，但是没有成功；我的代码：

‍‍‍‍import React,{ useEffect,useState } from "react";
import ContentLoading from "./ContentLoading";
import ContentItems from "./ContentItems";
import InfiniteScroll from "react-infinite-scroll-component";

const FetchContents = () => {
  const ListLoading = ContentLoading(ContentItems);
  const [appState,setAppState] = useState({
    loading: false,repos: null,nextURL: "/widgets/home-page?count=5",});
  
  function Fetch(x) {
    useEffect(() => {
      FetchContent(x);
    },[setAppState]);
  }
  function FetchContent(nextUrl) {
    const apiUrl = "http://api-v2.filmnet.ir";
    const URL = apiUrl + nextUrl;
    setAppState({ loading: true });
    fetch(URL)
      .then((res) => res.json())
      .then((repos) => {
        setAppState({
          loading: false,repos: repos,nextURL: repos.Meta.next_url,});
      });
  }
  return (
    <InfiniteScroll
      dataLength={5}
      hasMore={true}
      inverse={true}
      style={{ display: "flex",flexDirection: "column-reverse" }}
      next={Fetch(appState.nextURL)}
    >
      <ListLoading isLoading={appState.loading} repos={appState.repos} />
    </InfiniteScroll>
  );
};
export default FetchContents

;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）