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

Другие вопросы по тегам