如何使用反应 useState 钩子防止竞争条件

Question

我有一个组件，它使用钩子状态 (useState) api 来跟踪数据。

对象看起来像这样

const [data,setData] =  React.useState({})

现在我有多个按钮可以发出 API 请求并使用新密钥设置数据

setAPIData = (key,APIdata) => {

    const dup = {
      ...data,
      [key]:APIdata
    }
    setData(dup)
}

现在，如果我同时发出多个请求，则会导致竞争条件，因为在 react 中设置状态是异步的，并且我获得了先前的值。

在基于类的组件中，我们可以通过一个 updater 函数来获取更新的值，这个基于钩子的组件是如何做的。

Answer 1

您必须使用带有函数的 setData 作为其参数。 那么它总是会得到之前的状态，不管它会以什么顺序被调用。

  setAPIData = (key, APIdata) => {
    setData(prevData => ({
      ...prevData,
      [key]: APIdata
    }));
  };