React 中的多个状态不会更新，这些状态依赖于其他状态

如何解决React 中的多个状态不会更新，这些状态依赖于其他状态

当状态 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