在 React 中向外部变量添加状态

如何解决在 React 中向外部变量添加状态

假设我有一个名为 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 进行更改。