在我滚动之前，react-virtualized 列表项不会使用更改的道具重新渲染

Question

我有一个像这样的反应虚拟化列表（使用列表组件）：

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() 最终被调用。

当 prop 发生变化时，如何进行反应虚拟化以重新呈现列表项？

Answer 1

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

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

当然，List 实际上并没有名为 data 的 prop，但是将您的数据集作为 prop 传递会告诉 List 在数据更改时重新呈现。

在底层，List 和其他组件使用 PureComponent，只要您传递给它们的 props 发生变化，它就会触发重新渲染。您可以在 here.

上阅读更多内容

注意：我实际上从未对列表组件执行过此操作，但已将其与 MultiGrid 组件一起使用。在我的用例中，我允许用户对数据进行排序，并且需要将数据集传递给 MultiGrid，以便它在数据更改时重新呈现。

希望对您有所帮助。

Answer 2

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

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

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

在我滚动之前，react-virtualized 列表项不会使用更改的道具重新渲染

react-virtualized list item does not re-render with changed props until I scroll

javascript

reactjs

react-virtualized