如何在setState更新react功能组件状态后正确执行逻辑？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState(
      { count: this.state.count + 1 },
      () => {
        // 这里的代码会在状态更新后执行
        console.log('Count updated:', this.state.count);
      }
    );
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 这里的代码会在 count 更新后执行
    console.log('Count updated:', count);
  }, [count]); // 依赖数组中包含 count，当 count 变化时 useEffect 会执行

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

this.setState((prevState) => ({
  count: prevState.count + 1,
}));