我有这样的场景,在函数内部我更改状态,调用异步方法,然后想要使用更新后的状态。问题是状态没有改变,尽管在异步调用后运行:
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”,因为我想在值更改时重新渲染。 有没有办法让我可以在异步调用后获取更新的状态?
最佳答案
来自您的代码块:
const updateValue = () => {
setValue(2);
myAsyncMethod().then(()=>{
console.log(value); //still '1' !
});
};
setValue
也是异步的。因此,这就是为什么您仍然获得值为 1 的原因。根据您的场景,您将获得要设置的值。您可以将其而不是状态变量传递为:
const updateValue = newValue => {
setValue(newValue);
myAsyncMethod().then(()=>{
console.log(newValue);
});
};
希望这对您有帮助。
关于javascript - 如何在同一函数中异步调用后获取更新的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60512506/