动态更新列标题 React-Table v7答案

【问题标题】：update Column Headers dynamically React-Table v7动态更新列标题 React-Table v7
【发布时间】：2020-09-29 22:27:24
【问题描述】：

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

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

PFA 代码框示例 - 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>
);
}

【问题讨论】：

欢迎来到SO，分享一点代码（除了codesandbox），让会员可以重现你的问题
如何添加新列？

标签： javascript reactjs react-table-v7

【解决方案1】：

Usetable Hooks 使用 UseMemo 进行记忆与列的依赖关系，在我的情况下，我只改变相同的引用数组列，并且 usememo 找到它的 Equal，因此不更新表中的列。

解决方案 1 将列传递给表时复制列。

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

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

【讨论】：