React 无法更新道具

Question

所以，我有一个名为 Columns.js 的文件，其中包含以下代码：

const cols = {
key1:val1,
key2:val2,
...
...
}
export default cols;

现在，我有另一个名为 Widget.js 的文件，其中包含以下代码：

//other imports 
import cols from './Columns';
//import Table and TableLoader

export default function Widget(){
const data,error,loading... = useQuery(//some query)
if(loading)return (<TableLoader cols={cols}/>);
return (<Table cols={cols} data={data}/>)
}

我正在使用 react-table 现在，看看 TableLoader 是如何工作的：

cols.map((col)=>col.Cell = (<SomeComponent />);
//look here I am calling Table
return <Table cols={cols} data={[{}]}>

现在的问题是，由于 cols 在加载器中得到更新，当加载完成并在 Widget.js 中传递列时，我得到的是更新后的列。知道如何解决这个问题吗？我要之前不变的cols.

注意：我已经尝试过使用扩展运算符克隆它，但没有用。

什么有效：我没有从另一个文件导入 cols，而是添加到组件中并且它有效。所以，当我在组件中有实际数据时，它就起作用了。

编辑：还尝试从自定义方法返回对象但不起作用。还尝试通过声明两个变量来调用方法，但不起作用。

Answer 1

cols 数组上的扩展运算符会创建一个新数组，但对对象的引用将保持不变，这就是您在上游看到更改的原因。您可以在地图函数中使用扩展运算符：

return <Table
  cols={cols.map((col) => ({ ...col, Cell: (<SomeComponent />) })};
  data={[{}]}
/>

请注意，如果您的 col 对象有更多的嵌套对象，这将失效，在这种情况下您可能需要研究深度克隆。

React 无法更新道具

React unable to update props

reactjs

react-table

react-state