在 React Table 中动态更改列标题名称

Question

我在仪表板项目中使用 React Table。我想在每个选项卡单击时更改 React Table 列标题名称。我将名称状态作为 React 表中的道具传递，但标题文本并未根据道具发生变化。这可以更改其中的列标题吗？

下面是 react table 组件的代码，其中 tabName 是我作为 props 传递的状态，它没有改变。

const BreakdownTable = ({ tabName }) => {
  // console.log(tabName);
  const data = React.useMemo(
    () => [
      {
        col1: "com.gumlet.limited-videoPlay",
        col2: "100",
        col3: "1.3k",
      },
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: tabName,
        accessor: "col1",
      },
      {
        Header: "Unique Views",
        accessor: "col2",
      },
      {
        Header: "Total Views",
        accessor: "col3",
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    // rows,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    // pageCount,
    gotoPage,
    nextPage,
    // previousPage,
    setPageSize,
    pageSize,
    state,
    setGlobalFilter,
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 15 },
    },
    useGlobalFilter,
    useSortBy,
    usePagination
  );

  const { globalFilter } = state;

Answer 1

您可以尝试制作这样的列，一个简单的纯 JavaScript 数组吗？这将有助于确定问题是否与 useMemo 功能有关。

const columns = [
  {
    Header: tabName,
    accessor: "col1",
  },
  {
    Header: "Unique Views",
    accessor: "col2",
  },
  {
    Header: "Total Views",
    accessor: "col3",
  },
]