useState中的updater函数可以在React中重新定义吗

Question

我正在开发一个使用存储对象的相当复杂的组件。数据是本地的，所以不需要添加到我的Redux存储中，但它足够昂贵，不应该在每次渲染时都进行计算。我正在使用useState来存储和更新此对象。然而，我有几个关于商店的函数，我想将它们分解成一个新文件，包括updater函数。例如，我想做类似的事情：

import { storeUpdater } from './ComponentStore.js';
function MyComponent(props) {
const updateStore = storeUpdater;
let storeState = useState({});
const store = storeState[0];
storeState[1] = updateStore;
...
}

这是否可靠，更重要的是，它是否违反了任何规则/反模式？

Answer 1

这不应该起作用。您只是将您定义的storeState[1]重新分配给不同的函数，而不是useState提供的setState。此代码根本不应该更新您的storeState[0]。

相反，您应该让storeUpdater函数将setState函数作为参数，并在该组件中提供它。

function storeUpdater(setState) {...}

const updateStore = () => storeUpdater(storeState[1])

然后，在updateStore中，对storeState进行所需的修改，然后将新状态传递给setState。如果新状态依赖于以前的状态，则可以使用setState(prevState => nextState)语法。