处理rest api中的图像和链接并在React中显示它们的最佳方法

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

const ImageAndLinkComponent = () => {
  const [imageData, setImageData] = useState(null);
  const [linkData, setLinkData] = useState(null);

  useEffect(() => {
    // 发起 API 请求获取图像和链接数据
    fetch('your-api-endpoint')
      .then(response => response.json())
      .then(data => {
        setImageData(data.image);
        setLinkData(data.link);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []);

  return (
    <div>
      {imageData && (
        <img src={typeof imageData === 'string' ? imageData : URL.createObjectURL(imageData)} alt="Image" />
      )}
      {linkData && (
        <a href={linkData} target="_blank" rel="noopener noreferrer">Link</a>
      )}
    </div>
  );
};

export default ImageAndLinkComponent;