Question

我被困在一个简单的行和带有react-virtualized的项目渲染问题上。我正在尝试渲染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 vs. let循环。我只是无法弄清楚这里缺少什么，以及为什么这两个示例之间的工作方式有所不同。寻求帮助。

Answer 1

您只是没有选择视频。在const video = this.props.videos[index];行中，您已经选择了视频，并且同一视频通过该行呈现。在循环中将线移动

无法弄清楚react-virtualized List的重复行/项目问题

1 个答案: