如何解决Reactjs 无限滚动组件总是渲染新数据
滚动后,我的数据总是呈现到第 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
解决方法
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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。