Обновлять реагирующий виртуализированный список при обновлении данных в избыточном состоянии - PullRequest
Новая
       7

Обновлять реагирующий виртуализированный список при обновлении данных в избыточном состоянии

0 голосов
/ 16 сентября 2018

У меня есть реагирующий виртуализированный список, который заполняется данными, поступающими от вызова API, который сохраняет извлеченные данные в хранилище избыточных данных. Действие, чтобы начать выборку данных из API, отправляется, когда компонент монтируется, данные поступают и сохраняются в хранилище, но список реагирующей виртуализации не обновляется с этими данными, пока страница не обновится вручную пару раз перед данные отображаются в списке. Также в фоновом режиме выполняется опрос API для извлечения обновленных данных, которые затем будут отображаться в списке.

Как настроить список для прослушивания, когда данные поступают, и отображения данных соответствующим образом (для прослушивания изменений в хранилище избыточных данных). Вот моя реализация реагирующего виртуализированного InfiniteLoader & List: 

< InfiniteLoader
isRowLoaded = {
  this._isRowLoaded
}
loadMoreRows = {
  this._loadMoreRows
}
rowCount = {
    visibleRequest.length
  } > {
    ({
      onRowsRendered,
      registerChild
    }) => ( <
      AutoSizer > {
        ({
          height,
          width
        }) => (
          <List ref = {ref => (this.registerChild = ref)}
          className = "List"
          height = {height}
          rowHeight = {listRowHeight}
          onRowsRendered = {onRowsRendered}
          rowCount = {rowCount}
          rowRenderer = {this._rowRenderer}
          width = {width}
          />
        )
      }
      </AutoSizer>
    )
  }
  </InfiniteLoader>

// rowRenderer function
_rowRenderer = ({
  index,
  key,
  style
}) => {
  const {
    loadedRowsMap,
    selected
  } = this.state;
  const row = this.getDatum(index);
  let content;
  if (loadedRowsMap[index] === STATUS_LOADED) {
    content = row;
  } else {
    content = ( <div className = "placeholder"
      style = {
        {
          width: _.random(100, 200)
        }
      }
      />
    );
  }
  return ( <NewRequest key = {key}
    content = {content}
    style = {style}
    row = {row}
    {...this.props}
    />
  );
};
...