从useEffect中的api获取并相应地呈现组件。

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在useEffect中执行异步操作，获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 数据获取成功后更新组件状态
        setData(data);
      });
  }, []); // 传入空数组作为第二个参数，表示只在组件挂载和卸载时执行一次

  return (
    <div>
      {data ? (
        // 根据获取的数据渲染组件
        <div>{data}</div>
      ) : (
        // 数据还未获取到时显示加载中
        <div>Loading...</div>
      )}
    </div>
  );
};

export default MyComponent;