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

Question

当状态 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>
  );
}

Answer 1

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

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

Multiple States in React doesn't update which are dependent on other state

javascript

reactjs

react-hooks

react-state