如何制作 Api 的过滤列表并在反应中实现无限滚动的分页

Question

这仅适用于过滤第 1 页，但在使用 react-infinite-scroll-component 实现无限滚动后，它不会 append 第 2 页通过使用 spead 运算符得到第 1 页的结果，它使 setcontacts 成为一个数组数组，任何人都可以帮助我这个

const searchState =  (async fetchData => {
    const requests= await axios({
        method: 'GET',
        url: 'api url',
        params: { name: Search, page: page },
    });
    const cons= requests.data.results;
    console.log(cons);
    // console.log(cons.location222.name)
    let  matches = cons.filter(con => {
        const regex = new RegExp(`^${fetchData}`,'gi');

        return con.name.match(regex);
    });

    if (fetchData.length === 0) {
        matches=[];
    }

    // setLoading(true)
    setContacts(matches);

    // setContacts(prevcontacts=>{ return [...prevcontacts,matches]})
});

Answer 1

使用 React 组件无限加载内容。 我正在使用"React Infinite Scroller" 。 这个 fork 维护了一个简单、轻量级的无限滚动 package，它支持 window 和可滚动元素。

Window 滚动事件

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

DOM 滚动事件

<div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader" key={0}>Loading ...</div>}
        useWindow={false}
    >
        {items}
    </InfiniteScroll>
</div>

自定义父元素 您可以定义自定义 parentNode 元素以作为滚动计算的基础。

<div style="height:700px;overflow:auto;" ref={(ref) => this.scrollParentRef = ref}>
    <div>
        <InfiniteScroll
            pageStart={0}
            loadMore={loadFunc}
            hasMore={true || false}
            loader={<div className="loader" key={0}>Loading ...</div>}
            useWindow={false}
            getScrollParent={() => this.scrollParentRef}
        >
            {items}
        </InfiniteScroll>
    </div>
</div>