如何向ReactDOM展示接口信息？

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

function ApiInfo() {
  const [apiData, setApiData] = useState({});

  useEffect(() => {
    // 在组件挂载后进行接口调用
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/info');
      const data = await response.json();
      setApiData(data);
    } catch (error) {
      console.error('接口请求失败：', error);
    }
  };

  return (
    <div>
      <h1>接口信息</h1>
      <p>接口名称：{apiData.name}</p>
      <p>接口版本：{apiData.version}</p>
      {/* 根据接口返回的数据结构展示其他相关信息 */}
    </div>
  );
}

export default ApiInfo;