React-Table 在 select 上重新渲染整个 table

Question

我有一个相对标准的 react-table 可以选择行 - 使用 HOC SelectTable 实现，很像示例 react-table 提供的：

https://github.com/tannerlinsley/react-table/blob/v6/docs/src/examples/selecttable/index.js

我的专栏之一的主要区别是自定义组件：

 const columns = [
      {
      ...other columns...
      {
        Header: "Sound file",
        accessor: "sound_file",
        Cell: props => {
          return <SoundFilePlayer url={props.row.sound_file_url} />;
        },

        minWidth: 80
      }
    ];

SoundFilePlayer 组件是一个 react-player 组件，它播放作为道具传递给组件的声音文件。本质上它加载传入的 URL 并呈现声音播放器：

加载 url 之前（持续时间默认为 0:00）

然后在加载后以正确的持续时间进行渲染：

我面临的问题是，每当在我的 table 中选择一行时，整个 table 都会重新呈现 （这没问题如果没有声音播放器）- 这意味着声音文件播放器将重置为 0:00 持续时间，然后再次以正确的持续时间重新加载。每行都会发生这种情况。

我的猜测是检查所有行的键以查看它们当前是否被选中导致重新呈现整个 table。

我是否只重新渲染选定的行，而不是整个 table？我看过 https://reactjs.org/docs/state-and-lifecycle.html 以及其他一些 SO 帖子，但似乎不能只重新呈现受影响的行。或者甚至只是重新呈现带有复选框的列？

Answer 1

您可以像这样尝试使用 useMemo 钩子来记忆组件

const file = React.useMemo(() => <SoundFilePlayer url={props.row.sound_file_url} />, [props.row.sound_file_url]);

除非文件 url 发生变化，否则它将不会重新创建组件功能并将从内存中获取它。

Answer 2

所以我最终找到了解决方案 - 只需将我的 react-table 版本降级，特别是 6.8.6 就解决了这个问题。

似乎在以后的版本中引入了一个错误（我怀疑这个错误会被修复，因为现在关注的是版本 7）。

React-Table 在 select 上重新渲染整个 table

React-Table re-renders entire table on select

javascript

reactjs

react-table