Redux + Infinite =重新呈现整个列表？

Question

我尝试使用这个组件https://github.com/danbovey/react-infinite-scroller将无限滚动集成到我的列表组件(它使用redux)中。

然而，我面临的问题是，当我向下滚动到列表的底部时，它成功地加载了更多的项，但是它似乎重新呈现了整个列表，而不是只将新项呈现到列表的底部。这也会导致窗口回滚到顶部，这不是我所期望的。

有什么好主意吗？将我的代码发布如下：

import React, { useEffect } from 'react';
import './ItemList.sass';
import { connect } from 'react-redux';
import { fetchItems } from '../../../actions/itemListActions'
import ItemListing from './ItemListing'
//import InfiniteScroll from 'react-infinite-scroll-component';
import InfiniteScroll from 'react-infinite-scroller';

const ItemList = ({ items, fetchItems }) => {
    const itemsPerLoad = 15;

    useEffect(() => {
        if (items && !items.isNew) {
            return;
        }
        fetchItems({
            offset: 0,
            limit: 15,
            isNew: true,
            sort: null,
            reverse: null,
            filters: {},
            search: null
        })
    }, [])

    const loadMore = () => {
        console.log("Loading more");
        if (items.isFetching) {
            return;
        }

        if (items.isNew) {
            return;
        }
        
        fetchItems({
            offset: items.data.length,
            limit: itemsPerLoad,
            isNew: false,
            sort: items.sort,
            reverse: items.reverse,
            filters: items.filters,
            search: items.search
        });
    }

    return (
        <div className="item-list">
            <div>Total items: {items.total}</div>
            {items.isFetching ? (
                <div>Loading..</div>
            ) : items.error ? (
                <div>An error occured. Please try again later.</div>
            ) : (
                <InfiniteScroll
                    loadMore={loadMore}
                    hasMore={items.total > items.data.length}
                    loader={<div key={0}>Loading...</div>}
                    initialLoad={false}
                    >
                    {items.data &&
                    items.data.map(item =>
                        <ItemListing
                            key={item.id}
                            item={item}>
                        </ItemListing>
                    )}
                </InfiniteScroll>
            )}
        </div>
    );
}

const mapStateToProps = state => {
    return {
        items: state.itemList.items
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchItems: (params) => dispatch(fetchItems(params))
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(ItemList);

Answer 1

以下是一些值得尝试的事情：

1. 确保定义了item.id。否则，React将重新呈现整个列表。
2. 在获取下一组项时，请注意存在一个三元条件items.isFetching ? items.error block : InfiniteScroll。这将导致<InfiniteScroll />在每次获取时再次被重新安装。