为什么我的 setState 只更新 state 一次？

Question

const [invalidateCacheKey, setInvalidateCacheKey] = useState(0);



const onChangeAssignee = () => {
  setInvalidateCacheKey(invalidateCacheKey + 1);
  mutate();
};



const selectOrder = () => {
  dispatch(
    showModal('SHOOTING_OPERATIONAL_VIEW', {
      modalType: 'OPERATIONAL_VIEW',
      modalProps: {
        content: <ShootingActionsView updateOrders={mutate} onChangeAssignee={onChangeAssignee} />,
      },
    })
  );
};

I have a functional component, I'm using useState to update the state of my invalidateCacheKey counter.

Then I have a dispatch method (react-redux) that displays a modal, I pass to the modal the callback (onChangeAssignee).

The problem is that: when the callback is fired the state (invalidateCacheKey) doesn't change inside the onChangeAssignee method (it is 0 after and before run the callback logging state inside the onChangeAssignee method), while inside the functional component (logging the state after useState declaration) the state (invalidateCacheKey) is 0 before the callback and is 1 after the callback.

I think that problem is dispatch method, it "stores" my state and it doesn't update it.

How to fix that?

Answer 1

Ciao, unfortunately hooks in react are async so if you try to write something like:

const onChangeAssignee = () => {
  setInvalidateCacheKey(invalidateCacheKey + 1);
  console.log(invalidateCacheKey)
  ...
};

you will log an old value of invalidateCacheKey , because setInvalidateCacheKey is async as I told you. To get updated value in react hooks you could use useEffect hook like:

useEffect(() => { // this will be triggered every time invalidateCacheKey changes
   console.log(invalidateCacheKey) // this shows the la st value of invalidateCacheKey
}, [invalidateCacheKey])

As an alternative, you could use a use-state-with-callback library. With this library you could write something like:

import useStateWithCallback from 'use-state-with-callback';
...

const [invalidateCacheKey, setInvalidateCacheKey] = useStateWithCallback(0, invalidateCacheKey => {
    console.log(invalidateCacheKey)  // here you have the last value of invalidateCacheKey
});

Note: set state reading state itself is always discouraged in react hooks. I suggest you to use this way:

const onChangeAssignee = () => {
  setInvalidateCacheKey(invalidateCacheKey => invalidateCacheKey + 1);
  ...
};

or

const onChangeAssignee = () => {
  let appo = invalidateCacheKey;
  setInvalidateCacheKey(appo + 1);
  ...
};

EDIT

Now lets say you need to use invalidateCacheKey in onChangeAssignee function. Lets suppose you worte code like this:

const onChangeAssignee = () => {
  setInvalidateCacheKey(invalidateCacheKey + 1);
  dostuff(invalidateCacheKey) // dostuff takes an old value of invalidateCacheKey so it doesn't work
};

You can solve this by moving dostuff into useEffect hook like:

useEffect(() => {
   dostuff(invalidateCacheKey) // here dostuff works because it takes last value of invalidateCacheKey
}, [invalidateCacheKey])

const onChangeAssignee = () => {
   setInvalidateCacheKey(invalidateCacheKey => invalidateCacheKey + 1);
};