React+antdui框架实现集合数据独立相互之间不依赖不受影响

问题场景：
我父组件有两个集合点击父组件中的标签打开子组件给我先第一个集合进行绑定数据
但是我第二个集合明明没有绑定数据但是也显示出来了，怎么让这两个集合进行独立
相互之间不受影响,使用唯一值控制,是不是需要销毁重新加载之类的操作。
拒绝bp，实现就采纳

父组件 部分关键性代码
funtion ListTreeComponets(){

// 创建三级节点 这个是我的节点代码 这个节点是动态新建的
        const interfaceNode = {
          title: (
            <span>
              <FacebookOutlined onClick={() => showModallocaDoument(formData,formData.SolutionNo)} style={{ marginLeft: '15px', marginRight: '5px' }} />
           
            </span>
          ),
        };
    
    
    //这个方法就是打开子组件的
    const showModallocaDoument=(data)=>{ 
      const internewData = {
        ...data,
        OptionControl: data.OptionControl,
        Optionlable:data.Optionlable,
      };
      const finalData = {
        ...internewData,
      };
      setisopendocmentdw(true);
      }
      
 <IndocmentComponets
  isopen={isopendocmentdw}  
  onClose={handleCloseModaldo}
  />

}export default ListTreeComponets

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

  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>
          ),
        },
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type',
          render: (text) => (
            <Tooltip title={text}>
              <span>{text}</span>
            </Tooltip>
          ),
        },,
      ];
    
    
    //读取api接口数据部分 这里就是获取数据的方法
const docMetaSave = (formData) => {
  const updatedFormData = formData.map((data) => ({
    ...data,
    SolutionNo: formattribute.SolutionNo
  }));
   setBasicMeta(updatedFormData);
   setbasicsource(updatedFormData);
  console.log('追加后的from数据', updatedFormData);
};

//给table赋值
useEffect(() => {
  debugger
  if (!basicMeta) {
    setColumntwoData([]);
    return;
  }
debugger
  setColumntwoData(
    basicMeta.map((row, index) => ({
      key: index.toString(),
      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,     
    }))
  );
debugger
  console.log("读取到的数据源信息:",columntwoData)
}, [basicMeta]);
    
    
     <Table
            dataSource={columntwoData}
            columns={columntwo}
            />
    
    }export default IndocmentComponets

实现效果:
假设我新建了多个集合并给每个集合绑定或者不绑定数据,点击不同的集合展示的效果不同。
假设集合一绑定了数据我点开集合一table中就是有数据的
假设集合二没有绑定数据我点开集合二table中就是空的
注意:集合之间不影响,我操作了集合2就不会对集合一造成影响。
我个人感觉是加载绑定数据哪里的问题，只要给他区分开来或者价格标记就可以了，具体的实现我不是清楚。
我现在绑定每次都是加载的时候给这个table赋值而这个table就一个。都是同一个tabel。

img图片

你可以通过在React中使用唯一的key属性来实现集合数据的独立渲染，避免相互之间的影响。确保每个子组件都有唯一的key值，这样React在更新DOM时会识别它们并确保正确的挂载和卸载。
如果你的第二个集合明明没有绑定数据但是也显示出来了，可能是因为你没有正确设置唯一的key属性或者在渲染时出现了其他问题。请检查你的代码，确保每个子组件都有唯一的key，并且在父组件中处理数据和渲染时，只渲染对应的子组件。
不需要销毁和重新加载组件，正确设置唯一的key属性应该可以解决你遇到的问题。

如果您想要实现集合数据独立相互之间不依赖不受影响的功能，您可能需要使用 React 的状态管理工具，比如 Redux 或 MobX ，来管理您的数据流。这样，您可以在不同的组件之间共享或隔离您需要的数据，而不会相互影响。

回答部分参考、引用ChatGpt以便为您提供更准确的答案：

在使用西门子软件编辑梯形图时，您可以按照以下步骤进行操作：

1. 打开西门子软件，并创建一个新的梯形图项目。
2. 根据给定的电机数量，在梯形图中创建对应数量的变量用于存储电机的累计运行时间和准备就绪的DI信号。
3. 使用计时器或计数器块来实现电机的累计运行时间计算。根据电机的编号，将对应的计时器或计数器与对应的变量进行关联。
4. 使用DI块来接收准备就绪的信号，并将其与对应的变量进行关联。
5. 根据累计运行时间和准备就绪的信号进行排序和排名。您可以使用比较器块和其他逻辑块来实现此功能。
6. 根据排名结果，将电机的编号与对应的排序结果进行匹配，以展示符合条件的电机信息。

请注意，具体操作步骤可能因您使用的西门子软件版本和功能模块而有所不同。建议参考西门子软件的官方文档和教程，以获得更详细和准确的操作指导。

react+antd实现列表互不影响的展开每条内容
写的非常详细，可以参考下

在子组件标签里添加“ref”属性

参考父子通信
https://juejin.cn/post/7216182414710784037
https://juejin.cn/post/7028779975780073485