useState中的updater函数能否在React中重新定义？

Question

我正在开发一个使用存储对象的相当复杂的组件。数据是本地的，因此不能保证将其添加到我的 Redux 存储中，但它足够昂贵以至于不应该在每次渲染时都计算它。我正在使用 useState 来存储和更新这个对象。但是，我有几个关于商店的功能，我想分解成一个新文件，包括更新程序功能。例如，我想做类似这样的事情：

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

这会可靠地工作吗，更重要的是，它是否会破坏任何 rules/anti-patterns？

Answer 1

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

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

function storeUpdater(setState) {...}

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

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

useState中的updater函数能否在React中重新定义？

Can the updater function in useState be redefined in React?

reactjs

react-hooks

use-state