React Hooks - 修改后的状态未立即反映

React Hooks 是 React16.8 引入的一种新的特性，它提供了一种在函数组件中使用状态和其他 React 特性的方式。使用 Hooks 可以使组件的逻辑更加清晰和简洁，但有时候我们可能会遇到一些问题，比如修改后的状态未立即反映。本文将深入探讨这个问题，并提供解决方案。

javascript
import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 这里打印的是更新前的 count 值
  };
  return (
    
      
Count: {count}
      Increment
    
  );
}
export default Counter;

javascript
import React, { useState, useEffect } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    
      
Count: {count}
      Increment
    
  );
}
export default Counter;