问题描述
当状态 A 的值满足条件但状态 B 没有改变时,我尝试更新状态 B。
如果运行下面的代码,当 A 达到 100 时,B 的值应该增加 +1,但是当显示时 B 的值保持固定为 0
从“react”导入 React,{useState};
export default function test() {
const [A,setA] = useState(0);
const [B,setB] = useState(0);
const handleStart = () => {
setInterval( () => {
setA(prev => prev + 1)
if( A === 100){
setB(prev => prev +1)
A = 0
}
},10)
}
return (
<div>
<h1>{A}</h1>
<h1>{B}</h1>
<button onClick = {() => {handleStart()}}> START </button>
</div>
);
}
解决方法
setA()
方法是一种异步方法,它异步更新值,因此当 React 创建一批这些异步任务时,setA 之前的 if
条件可能会首先触发。您需要将逻辑移入 SetA()
以使其正常工作。
代码 -
const handleStart = () => {
setInterval(() => {
setA((prev) => {
if (prev === 100) {
setB((prevB) => prevB + 1);
return 0;
}
return prev + 1;
});
},10);
};
工作示例 - codesandbox Link