无法使用react中的挂钩在我的本地状态中设置响应数据

import React, { useState } from 'react';

function MyComponent() {
  const [responseData, setResponseData] = useState(null);

  // 假设这是一个从服务器获取响应数据的异步函数
  const fetchData = async () => {
    // 使用某种方式获取响应数据
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();

    // 设置响应数据到本地状态
    setResponseData(data);
  };

  // 在组件渲染时触发数据获取
  useEffect(() => {
    fetchData();
  }, []);

  // 渲染响应数据到组件中
  return (
    <div>
      {responseData && (
        <div>
          {/* 在此处使用响应数据进行渲染 */}
        </div>
      )}
    </div>
  );
}

export default MyComponent;