React-Virtualized List пропускает строки при прокрутке
У меня возникла проблема при попытке отобразить список элементов следующим образом:
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
По иронии судьбы, возясь с этим, я случайно понял, что сделал неправильно. Я отправлю ответ с моим решением.
1 ответ
Хорошо, я нашел проблему (как и @MBrevda! +1!)
rowRenderer
Метод принимает стиль, который необходимо применить к отображаемому элементу списка: https://plnkr.co/edit/FzPwLv?p=preview