REACT - 更新状态，然后执行 console.log ，显示未更新的状态

Question

点击按钮后控制台显示0和页面1

function App() {
  const [count, setCount] = useState(0);
  
  const addOne = () => {
    setCount(count + 1)

    console.log(count)
  }
  
  return (
    <>
      <p>{count}</p>
      <button onClick={addOne}>Add</button>
    </>
  );
}

我认为是因为这setCount()是异步发生的，但即使我向 中添加 setTimeout console.log()，控制台也会继续显示未更新的状态

为什么？？？

Answer 1

React 中的状态更新始终是异步的。您将在 useEffect 中找到 count 的更新状态值

function App() {
  const [count, setCount] = useState(0);

  
  useEffect(()=> {
      console.log('count',count);
  },[count])
  
  const addOne = () => {
    setCount(count + 1)
  } 

  return (
    <>
      <p>{count}</p>
      <button onClick={addOne}>Add</button>
    </>
  );
}