如何使用useEffect呈现数组对象

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

function MyComponent({ initialData }) {
  const [data, setData] = useState(initialData);

  // 使用 useEffect 监听 data 的变化
  useEffect(() => {
    console.log('Data has changed:', data);

    // 这里可以进行数据处理或其他副作用操作

    // 返回一个清理函数（可选）
    return () => {
      console.log('Cleaning up...');
      // 清理操作，如取消订阅等
    };
  }, [data]); // 依赖数组，只有当 data 变化时，useEffect 才会重新执行

  // 模拟数据更新
  const updateData = () => {
    setData([...data, { id: Date.now(), value: 'New Item' }]);
  };

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
      <button onClick={updateData}>Add Item</button>
    </div>
  );
}

export default MyComponent;