使用async设置React钩子状态后，它不会立即更新

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

function MyComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    // 在状态更新后执行操作
    // 这里可以进行一些异步操作，如发送网络请求等
    console.log('状态更新后的数据:', data);
  }, [data]);

  const fetchData = async () => {
    // 使用async函数设置状态
    await setData('新的数据');
    console.log('设置状态后的数据:', data);
  };

  return (
    <div>
      <button onClick={fetchData}>更新状态</button>
    </div>
  );
}

export default MyComponent;