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

Question

我在 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}能用状态推新项目。但是如何避免相同项目的重复呢？

Answer 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]
            })
        })
    }