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

Posted 2023-03-10

【中文标题】添加新项目时如何使用无限滚动更新项目列表

【英文标题】：How to update list of items with Infinite scroll when new item added

【发布时间】：2021-03-18 11:41:50

【问题描述】：

我在 React.js 上实现了无限滚动 这是我的无限滚动组件，它工作正常。

import React, useRef,useCallback from 'react';

function InfiniteScrollContainer(props) 
    let children,loadMore,hasMoreItems,classes = props;

    const observer = useRef()
    const bottomRef = useCallback(node => 
        if (observer.current) observer.current.disconnect()
        observer.current = new IntersectionObserver(entries => 
            if (entries[0].isIntersecting && hasMoreItems) 
                loadMore()
            
        )
        if (node) observer.current.observe(node)
    , [hasMoreItems, loadMore]);


    return(
        <div>
            <div className=classes>
                children
            </div>
            hasMoreItems && <div className="load-more__container" ref=bottomRef>
                <span>Loading</span>
                <div className="load-more-anim">
                    <div className="circle"/>
                    <div className="circle"/>
                    <div className="circle"/>
                </div>
            </div>
            !hasMoreItems && <div className="load-more__container">No more data</div>
        </div>
    )


export default InfiniteScrollContainer;

这是我的函数，我请求获取更多数据

loadMoreResources = () => 
        let page,resources = this.state;
        let newPage = page +1;
        this.setState(page: newPage)
        this.props.getResources(undefined,undefined,newPage).then((res) => 
            if(res.meta && (res.meta.current_page < res.meta.last_page))
                this.setState(hasMoreItems:true)
            else this.setState(hasMoreItems:false)
            this.setState(
                resources: [...resources,...res.data]
            )
        )
    

当我删除一个项目时，我只是通过 id 从状态中删除该项目。它正在工作，但问题是当我创建新项目时，我需要更新项目列表。最好的方法是什么？ 在服务器上，我有一个分页并得到一个列表为data:[], current_page:1, last_page:3, total_items:20 能用状态推新项目。但是如何避免同一个项目的重复呢？

【参考方案1】：

您可以像这样更新您的 loadMoreResources 函数以从状态中删除所有重复项。

loadMoreResources = () => 
        let page,resources = this.state;
        let newPage = page +1;
        this.setState(page: newPage)
        this.props.getResources(undefined,undefined,newPage).then((res) => 
            let ids = res.data.map(o => o.id)
            let stateWithoutDuplicates = resources.filter((id) => !ids.includes(id))
            if(res.meta && (res.meta.current_page < res.meta.last_page))
                this.setState(hasMoreItems:true)
            else this.setState(hasMoreItems:false)
            this.setState(
                resources: [...stateWithoutDuplicates,...res.data]
            )
        )
    

【参考方案2】：

如果您知道需要在数组中的哪个位置添加它，您可以像获取数据时所做的那样更新状态

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

如果您要添加到顶部并且您的服务器再次返回相同的项目，您可以尝试对这两个项目使用相同的 key prop。如果它们都具有相同的键，React 不会渲染它们两次