如何有效地更新动态列?

Question

我使用React与ant设计表，我的代码是这样的:

const columns = moduleColumn.getColumns(columnName)
columns[columns.length-1].title ==='Action' ? console.log("no need to add the column! ") :
columns.push({
title: "Action",
dataIndex: "id",
key: "id",
align: "center",
render: (text, record, index) =>
{
return (
<ActionOuvrage
text={text}
record={record}
index={index}
ouvrage={props.ouvrage}
refData={props.refData}
handleShownComponent={props.handleShownComponent}
handleDataAction={props.handleDataAction}
handleIdOuvrage={props.handleIdOuvrage}
loadOuvrageData={loadOuvrageData}
/>
)
},
})
setTableData((prevState) => {return { ...prevState, data: fetchedData, columns: columns, total: count }}); 

组件第一次渲染的时候效果很好但是从第二次开始我的动作栏就像一个死组件我不能和它交互，道具不能更新我的状态它断开了

然后我更新了我的代码如下:

const columns = moduleColumn.getColumns(columnName)
columns[columns.length-1].title ==='Action' ? columns.pop() : console.log("no need to update the column! ")
columns.push({
title: "Action",
dataIndex: "id",
key: "id",
align: "center",
render: (text, record, index) =>
{
return (
<ActionOuvrage
text={text}
record={record}
index={index}
ouvrage={props.ouvrage}
refData={props.refData}
handleShownComponent={props.handleShownComponent}
handleDataAction={props.handleDataAction}
handleIdOuvrage={props.handleIdOuvrage}
loadOuvrageData={loadOuvrageData}
/>
)
},
})
setTableData((prevState) => {return { ...prevState, data: fetchedData, columns: columns, total: count }}); 

moduleColumn是数组的静态js文件，我存储我的列，我明白，如果我在其中一个数组中推送一个对象，它将在我的网页中永久存在，直到我重新加载它，因为我导入一个ref到该数组，而不是它的副本(javascript)。但我错过了一些为什么，在第一个代码，如果我推一个对象到我的数组，然后一个状态渲染它从我的组件断开?这是一个React案例，我没有找到一些东西来解释它的原因是什么以及如何解决它。
谁来帮我点蜡烛好吗?

Answer 1

经过一番研究，我发现JavaScript中导入的数组是可变的。当我对这个数组进行修改时，这些更改将在应用程序的整个生命周期中持续存在，或者直到网页刷新。

为了避免这种行为并防止意外修改，我创建了一个数组的浅拷贝:

const newColumns = [...moduleColumn.getColumns(columnName)]

这确保了原始数组保持不变，同时允许我使用本地副本。