如何在react中显示从CSelect元素中api读取的数组

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

function MyComponent() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    // 在这里调用API获取数据，并更新状态
    // 这里使用setTimeout模拟异步API调用
    setTimeout(() => {
      const mockData = ['Item 1', 'Item 2', 'Item 3']; // 假设API返回一个数组
      setData(mockData);
      setIsLoading(false);
    }, 1000); // 模拟1秒的API调用延迟
  }, []);
  
  // 其他组件代码
  
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <CSelect>
          {data.map(item => (
            <CSelect.Option key={item} value={item}>
              {item}
            </CSelect.Option>
          ))}
        </CSelect>
      )}
    </div>
  );
}