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

Question

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

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]您定义的 重新分配给不同的功能，而不是setState由useState. 这段代码根本不应该更新你storeState[0]的。

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

function storeUpdater(setState) {...}

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

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