如何通过react 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
    }));
  };