无法找出 react-virtualized List 的重复 rows/items 问题

Question

我被困在一个简单的行和项目渲染问题上，反应虚拟化。我正在尝试在一个大列表中渲染大约 2000 张卡片。我能够让项目呈现正常，但它们呈现为带有重复项目的单独行，而不是一堆卡片环绕在行弹性盒样式上。

我不知道我是否遇到了奇怪的闭包问题，或者我真的需要做什么才能避免项目重复。下面是我的代码和评论（下面的图片）。如果有人能阅读我的渲染函数并提出我可能做错的地方，我会很高兴。

<AutoSizer>
   {({ height, width }) => {
            const itemsPerRow = Math.floor(width / ITEM_SIZE);
            const rowCount = Math.ceil(this.props.videos.length / itemsPerRow);

            return (
              <List
                className="List"
                width={width}
                height={height}
                rowCount={rowCount}
                rowHeight={ITEM_SIZE}
                rowRenderer={({ index, key, style }) => {
                  const items = [];
                  const video = this.props.videos[index];

                  const fromIndex = index * itemsPerRow;
                  const toIndex = Math.min(
                    fromIndex + itemsPerRow,
                    this.props.videos.length
                  );

                  for (let i = fromIndex; i < toIndex; i++) {
                    items.push(
                      <div className="Item" key={i}>
                        <ProductCard video={video} />
                      </div>
                    );
                  }

                  return (
                    <div className="Row" key={key} style={style}>
                      {items}
                    </div>
                  );
                }}
              />
            );
          }}
        </AutoSizer>

这是显示的内容：

当我将 for 循环更改为：

for (let i = fromIndex; i < toIndex; i++) {
                    items.push(
                      <div className="Item" key={i}>

                            Item {i}
                      </div>
                    );
                  }

显示的是：

我再次阅读了闭包和 var 与 let 循环。我只是不太清楚这里缺少什么以及为什么这两个示例之间的工作方式不同。感谢您的帮助。

Answer 1

您只是没有选择视频。在一行 const video = this.props.videos[index]; 中，您选择了视频，同一视频在该行中呈现。在循环内移动行

无法找出 react-virtualized List 的重复 rows/items 问题

Can't figure out a repeating rows/items issue with react-virtualized List

javascript

react-virtualized