Javascript 将材质UI开关与MaterialTable列同步

更改列的

隐藏

状态后，我无法使网格重新渲染。我认为修改

列将导致网格重新呈现，因为它是绑定属性

下面是一个位于的交互式示例

index.jsx
主要的问题是反应道具是不可变的。如果修改组件中的道具，该值将不会保证重新渲染

您正在对
超级表
组件中的
列
道具进行变异，因此无法正常工作

解决方案是将列定义为常量，导入并将其设置为
列的初始状态<代码>列
无论如何都是一个常量，不必作为道具发送

components/columns.js
：

// define columns and export it

SuperTable.jsx
：

import initialColumns from './columns';

...
const [columns, setColumns] = useState(initialColumns);

状态也是不可变的，因此您不应该执行以下操作：

foundColumn.hidden = show;

但我们应该做的是：

const newColumns = ....;
setColumns(newColumns);

主要的问题是反应道具是不可变的。如果修改组件中的道具，该值将不会保证重新渲染

您正在对
超级表
组件中的
列
道具进行变异，因此无法正常工作

解决方案是将列定义为常量，导入并将其设置为
列的初始状态<代码>列
无论如何都是一个常量，不必作为道具发送

components/columns.js
：

// define columns and export it

SuperTable.jsx
：

import initialColumns from './columns';

...
const [columns, setColumns] = useState(initialColumns);

状态也是不可变的，因此您不应该执行以下操作：

foundColumn.hidden = show;

但我们应该做的是：

const newColumns = ....;
setColumns(newColumns);

我注意到，如果我试图取消隐藏隐藏的列，控制台中将抛出一个错误。我意识到隐藏列的列数据没有指定的计算宽度。我只是制作了自己的宽度，效果很好。这是最好的方法吗？请参阅我的更新（工作）示例。而且，这些列最终将是动态的，所以常量不起作用。。。我注意到，如果我试图取消隐藏隐藏的列，控制台中将抛出一个错误。我意识到隐藏列的列数据没有指定的计算宽度。我只是制作了自己的宽度，效果很好。这是最好的方法吗？请参阅我的更新（工作）示例。而且，这些列最终将是动态的，所以常量不起作用。。。
const newColumns = ....;
setColumns(newColumns);