如何使用useEffect呈现数组对象

import React, { useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);
  
  // useEffect将在组件渲染后执行
  useEffect(() => {
    // 在这里进行数据获取或异步操作
    // 可以使用axios、fetch等库发送HTTP请求获取数据
    // 假设从服务器获取到的数据是一个数组对象
    const fetchData = async () => {
      const response = await fetch('https://example.com/api/data');
      const result = await response.json();
      setData(result); // 更新状态变量data
    };
    
    fetchData(); // 调用数据获取函数
  }, []); // 空数组作为第二个参数，表示只在组件挂载时执行一次
  
  // 渲染数组对象
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}