如何使用react钩子将对象数组数据从子组件发送到父组件并存储在父对象中？

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState([]);

  // 处理子组件发送的数据
  const handleData = (newData) => {
    setData([...data, newData]);
  };

  return (
    <div>
      <ChildComponent sendData={handleData} />
      {/* 显示存储的数据 */}
      {data.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

import React, { useState } from 'react';

function ChildComponent({ sendData }) {
  const [inputData, setInputData] = useState('');

  // 处理数据发送
  const handleSendData = () => {
    // 创建一个新的对象，包含输入的数据
    const newData = { name: inputData };

    // 调用父组件传递的函数，将数据发送给父组件
    sendData(newData);

    // 清空输入框
    setInputData('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputData}
        onChange={(e) => setInputData(e.target.value)}
      />
      <button onClick={handleSendData}>发送数据</button>
    </div>
  );
}