如何在同一函数中异步调用后获得更新状态

Question

我有这样的场景，在一个函数中，我更改状态，调用异步方法，然后想要使用更新后的状态。问题是状态没有改变altho在异步调用后运行：

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

CCD_ 1也是异步的。所以，这就是为什么你仍然得到值为1。根据您的场景，您将获得要设置的值。您可以将其而不是状态变量传递为：

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

希望这对你有帮助。