React Table中点击标签页动态修改列头名称的实现问题

问题原因 #

你定义columns的React.useMemo依赖数组为空，只会在组件首次渲染时计算一次。后续tabName prop变化时，columns不会重新生成，React Table无法感知到列配置的更新，因此列头不会变化。

修复方案 #

将tabName添加到columns对应的useMemo依赖数组中即可，修改后的代码如下：

const columns = React.useMemo(
  () => [
    {
      Header: tabName,
      accessor: "col1",
    },
    {
      Header: "Unique Views",
      accessor: "col2",
    },
    {
      Header: "Total Views",
      accessor: "col3",
    },
  ],
  [tabName] // 这里添加tabName作为依赖
);

修改后每次tabName发生变化，都会自动生成最新的列配置，React Table会自动更新对应列的表头内容，不需要额外在组件内部做其他修改。

内容的提问来源于stack exchange，提问作者Gurupal singh