react js中API的空响应时的条件渲染

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

function MyComponent() {
  const [isEmptyResponse, setIsEmptyResponse] = useState(true);

  useEffect(() => {
    // 发起API请求并处理响应
    fetch('api-url')
      .then(response => response.json())
      .then(data => {
        // 检查响应是否为空
        if (data.length === 0) {
          setIsEmptyResponse(true);
        } else {
          setIsEmptyResponse(false);
        }
      })
      .catch(error => {
        console.error('API请求错误:', error);
      });
  }, []);

  return (
    <div>
      {isEmptyResponse ? (
        <p>API响应为空</p>
      ) : (
        <p>API响应不为空</p>
      )}
    </div>
  );
}

export default MyComponent;