React+andt ui框架实现勾选框勾选的操作，并获取到值

我编写了一个table表格我在表格重嵌套三个勾选按钮，但是我点击勾选的时候没有任何的效果，也没有抛出异常。数据是从其他组件读取过来的。
我初步认为是数据源的问题，应该是数据源类型不一样没有一些属性。

import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Table ,Checkbox} from 'antd';
import { useState,React,useEffect } from 'react';
function BasicDrawer(props){
  const { basicData, basicMeta, visible, onClose,parentnode } = props;
  const [setDataSource]=useState(null);

}

勾选框触发
const handleCheckboxChange = (e, key, field) => {
    debugger
    const newData = [...dataSource];
    const targetRow = newData.find((row) => row.key === key);
    if (targetRow) {
      targetRow[field] = e.target.checked;
      console.log("data",setDataSource);
      //setDataSource(newData);

    }
  };
// Define the columns for the table
  const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      key: 'col1',
    },
    {
      title: '字段类型',
      dataIndex: 'type',
      key: 'col2',
    },
    {
      title: '长度',
      dataIndex: 'length',
      key: 'col3',
    },
    {
      title: '英文名称',
      dataIndex: 'en_name',
      key: 'col4',
    },
    {
      title: '中文名称',
      dataIndex: 'zh_name',
      key: 'col5',
    },
   
    {
      title: '是否启用',
      dataIndex: 'is_enable',
      key: 'col6',
      render: (_, record) => (
        <Checkbox
          checked={record.enabled}
          onChange={(e) => handleCheckboxChange(e, record.key, 'enabled')}
        />
      ),
    },
    {
      title: '是否可见',
      dataIndex: 'is_visible',
      key: 'col7',
      render: (_, record) => (
        <Checkbox
          checked={record.visible}
          onChange={(e) => handleCheckboxChange(e, record.key, 'visible')}
        />
      ),
    },
    {
      title: '是否可编辑',
      dataIndex: 'is_edit',
      key: 'col18',
      render: (_, record) => (
        <Checkbox checked={record.visible}
         onChange={(e) => handleCheckboxChange(e, record.key, 'visible')} />
      ),
    },

  ];

 const dataSource = basicMeta.selectedRows.map((row, index) => ({
    key: index.toString(),
    name: row.name,
    type: row.type,
    length: row.length,
    en_name: row.en_name,
    zh_name: row.zh_name,
    enabled: true,
    editable: true,
    visible: true,
   
  }));

 <p style={{ margin: '0 10px' }}>
              读取到的数据源信息:{' '}
              {dataSource && <Table columns={columns} dataSource={dataSource} rowSelection={handleRowSelection}   />}
              <Form.Item wrapperCol={{ offset: 11, span: 16 }} >
              <Button type="primary" htmlType="submit" 
              onClick={generateDoc}
              >
                Docgenerate
              </Button>
         </Form.Item>  
        </p>

下图中值也更新了就是勾选框没有效果

以下是一个成功的例子：
这是一个静态的数据源，我的是动态。刚学习这个不太懂

import { Table, Checkbox, Button } from 'antd';
import { useState } from 'react';

const App = () => {


    const handleCheckboxChange = (e, key, field) => {
        debugger
        const newData = [...data];
        const index = newData.findIndex((item) => key === item.key);
        if (index > -1) {
          newData[index][field] = e.target.checked;
          setData(newData);
        }
      };
    
    const columns = [
      {
        title: '字段名',
        dataIndex: 'name',
        key: 'col1',
      },
      {
        title: '字段类型',
        dataIndex: 'type',
        key: 'col2',
      },
      {
        title: '是否启用',
        dataIndex: 'enabled',
        key: 'col3',
        render: (_, record) => (
          <Checkbox checked={record.enabled} onChange={(e) => handleCheckboxChange(e, record.key, 'enabled')} />
        ),
      },
      {
        title: '是否编辑',
        dataIndex: 'editable',
        key: 'col4',
        render: (_, record) => (
          <Checkbox checked={record.editable} onChange={(e) => handleCheckboxChange(e, record.key, 'editable')} />
        ),
      },
      {
        title: '是否可见',
        dataIndex: 'visible',
        key: 'col5',
        render: (_, record) => (
          <Checkbox checked={record.visible} onChange={(e) => handleCheckboxChange(e, record.key, 'visible')} />
        ),
      },
    ];
    

  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      type: 'string',
      length: 10,
      en_name: 'John Brown',
      zh_name: '约翰·布朗',
      enabled: true,
      editable: true,
      visible: true,
    },
    {
      key: '2',
      name: 'Jim Green',
      type: 'number',
      length: 5,
      en_name: 'Jim Green',
      zh_name: '吉姆·格林',
      enabled: false,
      editable: true,
      visible: true,
    },
    {
      key: '3',
      name: 'Joe Black',
      type: 'date',
      length: null,
      en_name: 'Joe Black',
      zh_name: '乔·布莱克',
      enabled: true,
      editable: false,
      visible: false,
    },
  ]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const generateDoc = () => {
    // 生成文档的逻辑
  };

  return (
    <>
      <Table columns={columns} dataSource={data} rowSelection={rowSelection} />
      <Button type="primary" onClick={generateDoc}>
        生成文档
      </Button>
    </>
  );
};

export default App;

• 这篇博客: 在React中插入可编辑的table表格中的 模拟的数据 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

{
  "code": 200,
  "modelList": [
    {
      "orderNum": "1",
      "projectName": { "name": "绿州", "num": "100" },
      "averagePrice": "10000"
    },
    {
      "orderNum": "2",
      "projectName": { "name": "长岛", "num": "101" },
      "averagePrice": "13000"
    },
    {
      "orderNum": "3",
      "projectName": { "name": "紫荆", "num": "102" },
      "averagePrice": "17000"
    }  
  ]
}