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

Posted 2023-02-21

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

【英文标题】：react-virtualized list item does not re-render with changed props until I scroll

【发布时间】：2019-03-17 02:36:24

【问题描述】：

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

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 store 并且可以与之交互。但是，在我滚动列表之前，它不会反映屏幕上的任何更改，只要我滚动，我就会看到列表项，因为它应该是更新后的 MyItem's render() 终于被调用了。

如何在 prop 更改时进行 react-virtualized 以重新渲染列表项？

【参考方案1】：

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

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

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

【参考方案2】：

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

<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，只要你传递给它们的道具发生变化，它就会触发重新渲染。你可以阅读更多关于here的内容。

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

希望这会有所帮助。

【讨论】：

我在react-virtualized的文档中没有找到这个解决方案，但是可以。谢谢！

是的，这行得通！ .. 你只需要传递一个额外的属性，它下次是唯一的，以便 List 组件在 shallowCompare 中找到新的变化并调用给定的重新渲染方法。

data=Math.random() 是通用解决方案。