无法找出反应虚拟化列表的重复行/项目问题答案

【问题标题】：Can't figure out a repeating rows/items issue with react-virtualized List无法找出反应虚拟化列表的重复行/项目问题
【发布时间】：2018-08-19 16:00:53
【问题描述】：

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

我不知道我是否有奇怪的关闭问题，或者我真的需要做什么才能不让这些项目重复。下面是我的 cmets 代码（下面的图片）。如果有人可以阅读我的渲染函数并提出我可能做错的地方，我会很高兴。

<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 循环的内容。我只是无法弄清楚这里缺少什么以及为什么它在两个示例之间的工作方式不同。感谢您的帮助。

【问题讨论】：

标签： javascript react-virtualized

【解决方案1】：

您只是没有选择视频。在一行const video = this.props.videos[index]; 您已经选择了视频，并且通过该行渲染了相同的视频。移动循环内的行

【讨论】：

Hmm..this 也没有这样做： for (let i = fromIndex; i
); }

不试 ` for (let i = fromIndex; i

); }`