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

Question

I have a component that uses hooks state (useState) api to track the data.

The object looks like this

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

Now I have multiple buttons which make API requests and set the data with the new key

setAPIData = (key,APIdata) => {

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

Now if I make multiple requests at the same time , it results in race conditions since setting state in react is asynchronous and I get the previous value.

In class-based components, we can pass an updater function to get the updated value, how to do this hooks based component.

Answer 1

You must use setData with a function as its argument. Then it will always get the previous state, no matter what order it will be called.

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