javascript - 如何在同一函数中异步调用后获取更新的状态

Question

我有这样的场景，在函数内部我更改状态，调用异步方法，然后想要使用更新后的状态。问题是状态没有改变，尽管在异步调用后运行:

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”，因为我想在值更改时重新渲染。有没有办法让我可以在异步调用后获取更新的状态？

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);
  });
};

希望这对您有帮助。