目前所遇到的问题
我动态新建的集合进行数据绑定的时候存在依赖性会继承数据无法独立显示
例如:问题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
项目流程描述图片
实现效果:
假设我新建了多个集合并给每个集合绑定或者不绑定数据,点击不同的集合展示的效果不同。
假设集合一绑定了数据我点开集合一table中就是有数据的
假设集合二没有绑定数据我点开集合二table中就是空的
注意:集合之间不影响,我操作了集合2就不会对集合一造成影响。
我个人感觉是加载绑定数据哪里的问题，只要给他区分开来或者加个标记就可以了，具体的实现我不是清楚。
我现在绑定每次都是加载的时候给这个table赋值而这个table就一个。都是同一个tabel。
操作:
我新建的动态集合,当我点击不同的集合给集合进行绑定数据的操作并展示不同的效果
实现:
我要实现在父组件中集合打开子组件展示不同的效果,集合与集合之间不存在依赖关系
缺陷:
会出现我在集合1绑定了数据我打开集合2的时候集合2没有绑定数据也出现了集合1绑定的数据
我在集合1绑定了数据,再打开集合2的时候给集合2绑定数据会覆盖集合1的数据,或者清楚集合1的数据
存在问题:
绑定的数据源只有一个,都共用的一个数据源,绑定的table也只有一个都是使用的同一个table
思路:
给table增加key 唯一值进行区分,或者给集合增加key唯一值进行区分,或者使用react中的数据持久性redlux实现
