Question

我有react-virtualized列表，其中填充了来自API调用的数据，该API调用将获取的数据存储在redux存储中。当组件装入，数据到达并保存在存储中时，将调度开始从API提取数据的操作，但在此页面上手动刷新两次之前，react-virtualized列表不会使用此数据进行更新。数据显示在列表中。另外，后台还会运行API查询以获取更新的数据，然后将其显示在列表中。

如何配置列表以侦听数据何时到达并相应地显示数据（侦听redux存储的更改）。这是我对react-virtualized 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}
    />
  );
};

更新Redux状态的数据时更新React虚拟列表

0 个答案: