Fatal编程技术网
  • reactjs/
  • Reactjs 如何在添加新项目时使用无限滚动更新项目列表

Reactjs 如何在添加新项目时使用无限滚动更新项目列表

reactjs pagination

Reactjs 如何在添加新项目时使用无限滚动更新项目列表,reactjs,pagination,infinite-scroll,intersection-observer,Reactjs,Pagination,Infinite Scroll,Intersection Observer,我已经在React.js上实现了无限滚动 这是我的无限卷轴组件，工作正常。 import React，{useRef，useCallback}来自“React”； 功能无限滚动容器（道具）{ 让{children，loadMore，hasMoreItems，classes}=props； const observer=useRef（） const bottomRef=useCallback（节点=>{ if（observer.current）observer.current.disconnect

我已经在React.js上实现了无限滚动 这是我的无限卷轴组件，工作正常。 
import React，{useRef，useCallback}来自“React”；
功能无限滚动容器（道具）{
让{children，loadMore，hasMoreItems，classes}=props；
const observer=useRef（）
const bottomRef=useCallback（节点=>{
if（observer.current）observer.current.disconnect（）
observer.current=新的IntersectionObserver（条目=>{
if（条目[0]。isIntersecting&&hasMoreItems）{
loadMore（）
}
})
if（节点）observer.current.observe（节点）
}，[hasMoreItems，loadMore]）；
返回(
{儿童}
{hasMoreItems&&
加载
}
{！hasMoreItems&&没有更多数据}
)
}

导出默认无限滚动容器如果您知道需要将其添加到数组中的什么位置，您可以只更新状态，就像您在获取数据时所做的一样


this.setState({
  resources: [newItem,...this.state.resources]
})



如果您要添加到顶部，并且服务器再次返回相同的项目，您可以尝试对这两个项目使用相同的密钥道具。如果它们都具有相同的键，则React不会呈现它们两次
您可以像这样更新loadMoreResources函数以从状态中删除所有重复项



loadMoreResources=（）=>{
让{page，resources}=this.state；
设newPage=page+1；
this.setState（{page:newPage}）
this.props.getResources（未定义，未定义，newPage）。然后（（res）=>{
让id=res.data.map（o=>o.id）
let stateWithoutDuplicates=resources.filter（{id}）=>！ids.includes（id））
if（res.meta&&（res.meta.current_页