成功添加数据后，滚动时删除了一个项目

Question

我将 react-table 与 react-window-infinite-loader 和 react-window 一起用于无限滚动。最初 table 从 API 获取 20 项（数据）。 在我的 table 中添加新数据后，它将 成功更新（通过 redux） 并且 数据现在为 21 和 行也有 21。但是在滚动和滚动数据后 仍然有额外的 1 个数据 （例如 21 > 41 等。每次滚动都会添加从 API 获取的 20 个项目）但是行在在 table（例如 21 > 40）1 行中滚动几次后的长度被自动或可疑地删除 请参阅 行（索引) 21 已删除 图片（没有任何仅通过滚动进行的操作）索引 21 已删除。 这将发生错误，因为 table 的最后一个索引现在将为 40，并且只有行的长度 40 下面的代码片段将是 undefined

const RenderRow = ({ index, style }) => {
        const row = rows[index]; // this will be undefined
        prepareRow(row);
        return useMemo(
            () => (
                <Row
                   row={row}
                  // some props
                />
            ),
            [row],
            areEqual
        );
    };

Rows and Data length

Row(index) 21 was removed

Answer 1

我找到了解决方案，问题是每次滚动时从 API 获取数据时都会复制数据。我所做的是删除重复数据（即使用 lodash 模块中的 uniqBy 函数）