在我滚动之前,react-virtualized列表项不会使用更改的道具重新呈现

时间:2018-10-11 22:28:14

标签: javascript reactjs react-virtualized

我有一个这样的反应虚拟列表(使用List组件):

renderItem = ({ index, key, style }) => {
  const {
    entries,
    projectId,
  } = this.props;
  const entry = entries[index];

  return (
    <div key={key} style={style}>
      <MyItem
        entry={entry}
        entryIndex={index}
        projectId={projectId}
      />
    </div>
  );
}

<List
  rowHeight={75}
  rowRenderer={this.renderItem}
  rowCount={entries.length}
  width={780}
  height={1000}
/>

MyItem已连接到redux存储并可以进行交互。但是,直到我滚动列表,它才反映出屏幕上的任何更改,因为我最终看到了MyItem's render(),所以一旦滚动,我便看到了列表项及其更新。 / p>

当道具更改时,如何进行虚拟反应以重新呈现列表项?

2 个答案:

答案 0 :(得分:1)

我很确定您可以将有问题的道具简单地传递到列表中。看起来像这样。

<List
  rowHeight={75}
  rowRenderer={this.renderItem}
  rowCount={entries.length}
  width={780}
  height={1000}
  data={entries} // this prop can be called anything
/>

当然,列表实际上没有称为data的道具,但是将数据集作为道具传递将告诉列表在数据更改时重新呈现。

注意:我实际上从未使用list组件执行此操作,但是使用MultiGrid组件进行了此操作。在我的用例中,我允许用户对数据进行排序,并且需要将数据集传递到MultiGrid,以便在数据更改时重新呈现它。

希望这会有所帮助。

答案 1 :(得分:0)

我找到了另一种适合我的解决方案。 我创建了一个包含数据长度的不可见元素。

<div>
    <span style={{ display: 'none' }}>{yourData.length}</span>
    <List ... />
</div>

我正在寻找一种解决方案来在有人写消息时更新我的​​聊天记录 (socket.io)。这对我来说是最好的解决方案,因为 forceUpdate 不起作用,额外的 prop 呈现所有元素,这会为我的代码中的每个聊天气泡触发动画。