Reactjs无限滚动组件总是呈现新数据

Question

滚动后，我的数据总是呈现到第2页和

第一页获取数据代码：

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);
}