React-Virtualized List在滚动时跳过行

Question

我尝试呈现如下项目列表时遇到问题：

render()
{
  const data = (my data);

  const cellRenderer = ({index, key}) => (
    <li key={key}>
      <Datum data={data[index]} />
    </li>
  );

  return (
    <AutoSizer>
      {
        ({ width, height }) => (

          <CellMeasurer cellRenderer={ cellRenderer } 
                        columnCount={ 1 }
                        width={ width }
                        rowCount={ transactions.length }>
            {
              ({ getRowHeight }) => (
                <List height={ height }
                      overscanRowCount={ 50 }
                      noRowsRenderer={ () => (<div> Nix! </div>) }
                      rowCount={ transactions.length }
                      rowHeight={ getRowHeight }
                      rowRenderer={ cellRenderer }
                      width={ width } />
              )
            }
          </CellMeasurer>
        )
      }
    </AutoSizer>
  );
}

现在，当我向下滚动时，它将跳过第二个列表项，直到最终我将一半的页面清空，但仍可滚动。

向上滚动时甚至更糟，它会跳过一半的页面。

AutoSizer和CellMeasurer似乎工作正常。 我逐步浏览了一下代码，看起来它们确实创建了正确的度量。

我的数据只是对象的静态数组。 没有承诺或信息流。

我还几次更改了Datum组件，以确保它是完全静态的标记，但没有任何改变。

有任何想法吗？

[编辑]

这是显示我的问题的Plunker： https ://plnkr.co/edit/2YJnAt?p = preview

具有讽刺意味的是，在摆弄它的同时，我不小心发现了我做错了什么。 我将用解决方案提交答案。

Answer 1

是的，我发现了问题（@MBrevda也是如此！+1！）

rowRenderer方法采用需要应用于呈现的列表元素的样式： https : rowRenderer