Reactjs无穷大滚动组件总是呈现新数据。

Question

滚动后，我的数据总是呈现到页面2和页面1消失，并且items.concat无法工作。

获取数据代码：

const FetchUrl = async (p) =>{
    const Url = await fetch(`api-link=${p}`);
    const data = await Url.json();
    setItem(data.DataNonProject.data)
}

获取更多数据的代码：

const fetchMoreData = () => {
    setTimeout(() => {
        setPage(page + 1);
        console.log(page);
        FetchUrl(page);
        setItem(items.concat(Array.from(items)));
    }, 100);
    // FetchUrl(page);
 }

返回数据：

{items ? 
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={true}
      loader={<h4>Loading...</h4>}
    >
     {console.log(items)}   
        { items.map((item, index) => (
            <div key={index}>
                div {index} - # {item.title}
                <br/><br/><br/>
            </div>
        ))}
    </InfiniteScroll>
    : '' }

我用的是react-infinite-scroll-component

Answer 1

const FetchUrl = async (p) =>{
  const Url = await fetch(`https://softkomik.site/api/komik-list?page=${p}`);
  const data = await Url.json();
  setItem(prev => [...prev, ...data.DataNonProject.data])
}

const fetchMoreData = () => {
    setTimeout(() => {
        setPage(page + 1); // At this point, page state will not be changed because setPage is async function
        FetchUrl(page + 1);
    }, 100);
 }