问题描述
假设我有一个名为 Columns.js 的文件,并且我正在其中导出一个对象 cols = {//some data}。现在,假设我正在文件 Widget.js 中导入该对象。现在,我可以将该变量添加到 react 组件的状态中吗?
我想这样做,因为对象太大了。另外,我试过克隆它,但它不起作用。
Columns.js
const cols = {A:'a',B:'b'}
export default cols;
Widget.js
import cols from './Columns';
export default function Widget(){
// here i want to make my variable cols have a state
//some code which uses cols and changes it
}
解决方法
这就像使用对象的扩展语法将它复制到 useState 调用中的状态对象一样简单(如果我们谈论功能组件)。 所以代码应该是这样的:
import cols from './Columns';
export default function Widget(){
// here i want to make my variable cols have a state
const [state,setState] = useState({...cols});
//some code which uses cols and changes it
}
现在您的 state
变量拥有与 cols
相同的数据,您可以在您的 ui 中使用它并使用 setState
进行更改。