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。
操作:
我新建的动态集合,当我点击不同的集合给集合进行绑定数据的操作并展示不同的效果
实现:
我要实现在父组件中集合打开子组件展示不同的效果,集合与集合之间不存在依赖关系
缺陷:
会出现我在集合1绑定了数据我打开集合2的时候集合2没有绑定数据也出现了集合1绑定的数据
我在集合1绑定了数据,再打开集合2的时候给集合2绑定数据会覆盖集合1的数据,或者清楚集合1的数据
存在问题:
绑定的数据源只有一个,都共用的一个数据源,绑定的table也只有一个都是使用的同一个table
思路:
给table增加key 唯一值进行区分,或者给集合增加key唯一值进行区分,或者使用react中的数据持久性redlux实现
你要在每次打开子组件后先进行赋值为空的操作，这样就不会保留上次加载的数据了
用同一个值域，销毁后再建立也可以，不过浪费运行时间。最佳是新增一个临时的变量去赋值。
你可以给每个集合添加一个唯一的标识符，然后在子组件中根据标识符来判断显示哪个集合的数据。例如，你可以给第一个集合添加一个标识符为xxx1，第二个集合添加一个标识符为xxx2。然后在子组件中通过props传递标识符给子组件，子组件根据接收到的标识符来判断显示哪个集合的数据。
另外，如果你的集合是动态新建的，你可以在父组件中对集合进行销毁和重新加载的操作。在重新加载时，只绑定需要显示的集合数据，不绑定其他集合的数据。这样就可以实现两个集合的独立性，相互之间不受影响了。
https://www.yii666.com/article/158359.html
在Vue.js中，如果你想要两个数据集合相互独立，你可以使用引用（reference）或者复制（copy）来创建他们。引用就是在原数据上直接进行修改，而复制则是创建一个新的数据副本，修改副本不会影响原数据。
，如果你在父组件中将第二个集合传递给子组件时使用了引用，那么在子组件中对这个集合的修改会影响到父组件中的数据。如果你想让它们相互独立，你应该在传递给子组件之前先复制第二个集合。
在组件中，为每个集合创建一个独立的状态
为集合加一个唯一标识
可以考虑以下几个方面：
- 组件化设计：将每个集合作为一个独立的组件，通过组件间的通信来实现数据的传递和控制。
- 状态管理：使用 React 的状态管理库（如 Redux、MobX 或 Context API）来管理每个集合的状态。
- 唯一值控制：为每个集合生成唯一的标识符或键值，以确保在渲染时只显示对应标识符或键值所关联的集合。
- 动态创建和销毁：根据需要动态地创建和销毁子组件。当点击父组件中的标签时，根据点击事件动态地创建新的子组件，并将相应数据绑定到该子组件上。
import React, { useState } from 'react';
import CollectionComponent from './CollectionComponent';
function ParentComponent() {
const [collections, setCollections] = useState([]);
const handleTagClick = (collectionId) => {
if (!collections.includes(collectionId)) {
setCollections([...collections, collectionId]);
}
};
const handleCollectionClose = (collectionId) => {
setCollections(collections.filter((id) => id !== collectionId));
};
return (
<div>
<div>
<button onClick={() => handleTagClick(1)}>Open Collection 1</button>
<button onClick={() => handleTagClick(2)}>Open Collection 2</button>
</div>
{collections.map((collectionId) => (
<CollectionComponent
key={collectionId}
collectionId={collectionId}
onClose={handleCollectionClose}
/>
))}
</div>
);
}
export default ParentComponent;