保存处于状态的对象数组并将其传递以返回，以便在react中的网页上显示它

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([]); // 定义状态变量data，初始值为空数组

  // 更新状态的方法
  const updateData = () => {
    const newData = [...data]; // 创建一个新的数组，复制原有的数据
    newData.push({ id: 1, name: 'John' }); // 向新数组中添加新的对象
    setData(newData); // 更新状态
  };

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

export default App;