使用来自API的数据在react本机中进行条件呈现

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

const API_URL = 'https://api.example.com/data'; // 替换为实际的API接口地址

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

  useEffect(() => {
    // 获取数据
    axios.get(API_URL)
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  if (data.length === 0) {
    return <div>No data available</div>;
  }

  return (
    <div>
      <h1>Conditional Rendering Example</h1>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default ExampleComponent;