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

After successfully adding data, upon scrolling an item was removed

提问人:Darwin Arugay 提问时间:3/1/2022 更新时间:3/7/2022 访问量:692

问:

我正在使用无限滚动。最初,该表有 20 个项目(数据)从 API 获取。 将新数据添加到我的表中后,它将成功更新(通过 redux),数据现在将是 21,行也是 21。但是在滚动和滚动之后,数据仍然有额外的 1 个数据(例如 21 > 41 等,每次滚动都会添加 20 个从 API 获取的项目),但是在表格中滚动几次后,行的长度不同(例如 21 > 40),1 行被自动或可疑地删除,请参阅删除了 Row(index) 21,图像(仅通过滚动执行任何操作),索引 21 被删除。 这将发生错误,因为现在表的最后一个索引将是 40,并且只有行的长度 40 下面的代码片段将是react-tablereact-window-infinite-loaderreact-windowundefined

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

行和数据长度

删除了 Row(index) 21

无限滚动 react-table 未定义索引 react-window

评论


答:

0赞 Darwin Arugay 3/7/2022 #1

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