React-Виртуализованный Список пропускает строки, когда не прокрутка

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://plnkr.co/edit/FzPwLv?p=preview