Как получить обновленное состояние после вызова asyn c в той же функции

Question

У меня есть такой сценарий, в котором внутри функции я изменяю состояние, вызываю асинхронный метод c и затем хочу использовать обновленное состояние. проблема в том, что состояние не изменилось, хотя запускается после асинхронного вызова c:

function MyComponent(){
 const [values, setValues] = useState<number[]>([]);
 const updateValue = () => {
  setValues(values.push(1));
  myAsyncMethod().then(()=>{
   console.log(values); //still empty array '[ ]' !
   setValues(values.remove(1)); //no value to remove
  });
 };
 return(
  <OtherComponent values={values} updateValue={updateValue}/>
 );
}

чего не хватает? Я не хочу использовать 'useRef', так как я хочу сделать рендер при изменении значения. Есть ли способ, чтобы я мог получить обновленное состояние после вызова asyn c?

Answer 1

Из вашего кода:

const updateValue = () => {
  setValue(2);
  myAsyncMethod().then(()=>{
   console.log(value); //still '1' !
  });
};

setValue также является асинхронным. Вот почему вы по-прежнему получаете значение как 1. Согласно вашему сценарию, вы получите значение для установки. Вы можете передать это вместо переменной состояния как:

const updateValue = newValue => {
  setValue(newValue);
  myAsyncMethod().then(()=>{
   console.log(newValue);
  });
};

Надеюсь, это поможет вам.