React Redux + Infinite Scroll = 重新渲染整个列表？

Question

React 新手，我正在尝试使用此组件 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 /> 在每次提取时再次重新挂载。