React+Desgin框架实现组件绑定数据源数据独立

目前所遇到的问题
我动态新建的集合进行数据绑定的时候存在依赖性会继承数据无法独立显示
例如:问题1:新建集合1 给集合1进行数据绑定
再新建集合2 打开集合2的时候集合2明明没有绑定数据但是存在集合1已经绑定的数据(没有做到刷新加载)问题2:集合1绑定了数据PushTabel,打开集合2的时候再给集合绑定数据PushLine会爱盖集合1已经绑定的数据问题3:不管是集合1和集合2绑定的数据都是共用的同一个数据源和table表格进行展示,所以会存在覆盖和继承的问题。

部分代码如下
父组件中
function ListTreeComponets ()  {

//这个方法就是打开子组件的
    const showModallocaDoument=(data,index)=>{ 
      debugger
      setSolutionNo(index); // 增加 key 的值，触发子组件重新渲染
      setisopendocmentdw(true);;
      }

//引用子组件
    <IndocmentComponets
  isopen={isopendocmentdw}  
  onClose={handleCloseModaldo}
  SolutionNo={SolutionNo}
  />



}expore default ListTreeComponets 
子组件
function IndocmentComponets(props){
   const {
      isopen,
        onClose,
        SolutionNo,
        
    }
    =props;

 const [basicMeta,setBasicMeta]=useState(null);

//table组件列定义
 const columntwo = [
        {
          title: '表名',
          dataIndex: 'table_name',
          key: 'table_name',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        },
        {
          title: '属性',
          dataIndex: 'attributes',
          key: 'attributes',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        },
        {
          title: '英文名',
          dataIndex: 'en_name',
          key: 'en_name',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        },
        {
          title: '中文名',
          dataIndex: 'zh_name',
          key: 'zh_name',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        },
        {
          title: '字段',
          dataIndex: 'fields',
          key: 'fields',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),

        },
        {
          title: '长度',
          dataIndex: 'length',
          key: 'length',
        },
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        }
      ];

  //绑定数据源方法
    useEffect(() => {
      if (!basicMeta) {
        setColumntwoData([]);
        return;
      }
      // 根据唯一值来区分不同的数据源
      const dataSource = basicMeta.map((row, index) => ({
        SolutionNo: row.SolutionNo,
        key: `columntwo_${index}`, // 在key中添加前缀，以区分不同数据源的key
        table_name: row.table_name,
        attributes: row.attributes,
        en_name: row.en_name,
        zh_name: row.zh_name,
        fields: row.fields,
        length: row.length,
        name: row.name,
        type: row.type,     
      }));
      setColumntwoData(dataSource);
      console.log("读取到的数据源信息:", columntwoData);
    }, [basicMeta, SolutionNo]);

//获取数据源方法
// 读取api接口数据部分 这里就是获取数据的方法
const docMetaSave = (formData, index) => {
  debugger
  const updatedFormData = formData.map((data) => ({
    [formattribute.SolutionNo]: [
      {
        ...data,
        SolutionNo: formattribute.SolutionNo
      }
    ]
  }));

  setBasicMeta(updatedFormData);
  console.log('追加后的from数据', updatedFormData);
};

//table数据数据源绑定并展示
 {columntwoData.length > 0 && (
                console.log('dataSource', columntwoData),
                <Table dataSource={columntwoData} columns={columntwo} key={SolutionNo} />
              )}


}expore default IndocmentComponets

使用深拷贝深拷贝创建一个新的确保每个组件都有自己的数据源
共用一个数据源肯定会有影响的