React子组件传递值给父组件,父组件接收数据进行处理

我编写了两个组件,一个是子组件用于获取数据,一个是父组件用于接收子组件传递过来的数据,我在子组件中调用父组件的方法,好像没有效果,父组件也成功引用了子组件,父组件也定义了方法。
我在调试的时候发现子组件中提交过去values这个值是空的,但是这个dataToSubmit是有值的。

子组件
import React, { useState } from 'react';
import { Button, Drawer,Form,Input, Space,Table } from 'antd';
import { AudioOutlined} from '@ant-design/icons';
const { Search } = Input;
function MedataComponets({visible,onClose,onSave}){

    const [open, setOpen] = useState(false);
    const [Result,setResult]=useState(null);
    const [searchKeyword, setSearchKeyword] = useState('');
    const [dataSource, setDataSource] = useState([])
    const [form] = Form.useForm();//Form.useForm()生成了一个form实例,并将其绑定到了Form组件上
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [selectedRows, setSelectedRows] = useState([]);
    const [selectedData, setSelectedData] = useState([]); // 新增 selectedData 状态变量
    
    const Medata= [
        {
            "table_name": "PurchTable",
            "fields": [
              {
                "name": "id",
                "type": "int",
                "length": 11,
                "attributes": ["primary key", "auto_increment"],
                "en_name": "id_en",
                "cn_name": "id_users"
              },
              {
                "name": "username",
                "type": "varchar",
                "length": 50, 
                "attributes": ["unique"],
                "en_name": "Username",
                "cn_name": "用户名"
              },
              {
                "name": "password",
                "type": "varchar",
                "length": 255,
                "attributes": [],
                "en_name": "Password",
                "cn_name": "密码"
              },
              
              
            ]
        }  
      ];

  
      const onSearch = (value) => {
        setSearchKeyword(value);
        
        const filteredData = Medata.filter((item) => {
          return item.table_name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
        });
    
        let tableData = [];
    
        filteredData.forEach((item) => {
          item.fields.forEach((field) => {
            tableData.push({
              key: `${item.table_name}/${field.name}`,
              name: field.name,
              type: field.type,
              length: field.length,
              en_name: field.en_name,
              cn_name: field.cn_name
            });
          });
        });
    
        setDataSource([...tableData])
      };

 
      const getFilteredData = () => {
        const filteredData = Medata.filter((item) => {
          return item.table_name.toLowerCase().indexOf(searchKeyword.toLowerCase()) !== -1;
        });
        
        let dataSource = [];
        filteredData.forEach((item) => {
          item.fields.forEach((field) => {
            dataSource.push({
              key: `${item.table_name}/${field.name}`,
              name: field.name,
              type: field.type,
              length: field.length,
              en_name: field.en_name,
              cn_name: field.cn_name
            });
          });
        });
    
        return dataSource;
      };

      const columns = [
        {
          title: '字段名',
          dataIndex: 'name',
        },
        {
          title: '字段类型',
          dataIndex: 'type',
        },
        {
          title: '长度',
          dataIndex: 'length',
        },
        {
          title: '英文名称',
          dataIndex: 'en_name',
        },
        {
          title: '中文名称',
          dataIndex: 'cn_name',
        }
      ];
    

    const suffix = (
        <AudioOutlined
          style={{
            fontSize: 16,
            color: '#1890ff',
          }}
        />
      );

    const handleCloseMeta= () => {
        setOpen(false);
        onClose(); // 调用父组件传递的onClose函数
      };

      const onFinish = (values) => {
        debugger
        // 将表单值和表格数据合并
        const dataToSubmit = { ...values, tableData: dataSource };
        onSave(dataToSubmit); // 将提交的数据传递给父组件的 onSave 方法
      };

      const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
          setSelectedData(selectedRows); // 更新 selectedData 变量
        },
      };

     
      return (
        <>
          <Drawer
          title="Basic Drawer"
          visible={visible} 
          placement="right"
          onClose={handleCloseMeta} 
          width={520}
          >

         <Space direction="vertical">
          <Search placeholder="Enter the form name"
           onSearch={onSearch}
           enterButton />
           <Form form={form}
           onFinish={onFinish}
           initialValues={{ tableData: dataSource }} // 设置初始值为表格数据
           >
            <Table dataSource={getFilteredData()} columns={columns} rowSelection={rowSelection}  />
           <Form.Item wrapperCol={{ offset: 11, span: 16 }} >
          <Button type="primary" htmlType="submit"  >
            Submit
          </Button>
         </Form.Item> 
           </Form>
           
        </Space>
       
          </Drawer>
        </>
      );
}export default MedataComponets

父组件
 <MedataComponets onSave={(formData) => handleSave(formData)}/>
const handleSave=(formData)=>{
    debugger
    console.log(formData);

  }
 

上图

img

img

img

img