动态更新列 Headers React-Table v7

Question

我需要动态更新列 headers 的帮助，因为我们在 useTable 挂钩中传递列列表，对于一个用例需要更新列 headers 列表，但我看不到新添加的列。

我尝试通过创建自定义挂钩覆盖 allColumns 实例对象。

PFA codesandbox 示例 - https://codesandbox.io/s/example-react-table-column-hide-show-5v712?file=/src/App.js

function App() {
 const [state, setState] = React.useState(false);
 setTimeout(() => {
  columns.push({
   Header: "Age",
   accessor: "age"
  });
  setState(true);
}, 5000);
const columns = React.useMemo(
 () => [
  {
    Header: "First Name",
    accessor: "firstName"
  },
  {
    Header: "Last Name",
    accessor: "lastName"
  }
 ],
[]
);
const data = React.useMemo(() => makeData(20), []);

return (
<Styles>
  <Table columns={columns} data={data} />
</Styles>
);
}

Answer 1

Usetable Hooks 使用 UseMemo 来实现具有列依赖性的 Memoization，在我的例子中，我只改变相同的引用数组列，并且 usememo 找到它的相等，因此不更新 table 中的列。

解决方案 1 将列传递给 table 时克隆的列副本。

方案二使用状态中的列，然后在超时后更新。

参考-https://www.digitalocean.com/community/tutorials/react-usememo

动态更新列 Headers React-Table v7

update Column Headers dynamically React-Table v7

javascript

reactjs

react-table-v7