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组件几次，以确保它是完全静态的标记，但这并没有改变任何东西。

有没有人有主意？

编辑

这是一个显示我的问题的插入器：https://plnkr.co/edit/2YJnAt?p=preview

具有讽刺意味的是，在摆弄它的时候，我意外地发现我做错了什么。我会提交一个答案和我的解决方案。

Answer 1

是的，我找到了问题所在( @MBrevda！+1也是！)

rowRenderer方法接受需要应用于呈现的列表元素的样式：https://plnkr.co/edit/FzPwLv?p=preview