React 18.2 获取数组对象中对象数据根据对象数据实现新建节点
我编写了一个集合嵌套树形控件的列子:
集合包括树形控件,控件又分为一级节点 二级节点 三级节点
我现在新建三级的节点的时候遇到了问题无法新建，我二级节点新建是根据一级节点数据进行新建的。
那我在新建三级节点的时候应该是按照二级节点数据进行新建，目前我就是无法获取到二级节点中的数据。
一下是部分的代码:
关键变量声明:
const [listData,setListData]=useState([]);
const [treeDataMap, setTreeDataMap] = useState({}); // 添加 treeDataMap 状态
const [treeData, setTreeData] = useState([]);// 初始化树形数据
树形控件数据源:
const tProps = {
treeData,
value,
onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
placeholder: 'Please select',
style: {
width: '100%',
},
filterTreeNode: (node, searchValue) => {
if (node.title && node.title.toLowerCase) {
return node.title.toLowerCase().includes(searchValue.toLowerCase());
}
return false;
},
treeDefaultExpandAll: true,
defaultExpandAll: true, // 添加该属性，将所有节点展开
onSearch: onSearch,
onSelect: onSelect,
};
数据加载方法：
// 获取与指定 list item 关联的 treeData
const getTreeDataForListItem = (id) => {
debugger
if (treeDataMap[id]) {
return treeDataMap[id];
}
return [];
};
一级节点新建代码
//解决方案新建部分
const handleSave = (formData, isTree) => {
debugger
//创建一个名为 TreeNode 的对象，其中包含标题、值和 children 数组等属性。
const TreeNode={
title: (
<span>
{`${formData.SolutionName}`}
<SolutionOutlined onClick={() => showModalBaisc(formData)} style={{ marginLeft: '5px', marginRight: '5px' }}/>
<PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '5px', marginRight: '5px' }} />
</span>
),
value: randomId,
children: []
};
if(isTree){
const newNode = {
title: (
<span>
{`${formData.SolutionNo}-${formData.SolutionName}`}
<DeleteOutlined onClick={(event) => handleDelete(`${formData.SolutionNo}-${formData.SolutionName}`, event)} />
</span>
),
value: randomId,
};
// 更新映射表中的数据
debugger
const newTreeDataMap = { ...treeDataMap };
newTreeDataMap[TreeNode.value] = [TreeNode]; // 新增 newnode 子节点
setTreeDataMap(newTreeDataMap);
// 若不是树形节点，则直接将其添加到列表数据中
setSelectedNode(newNode); // 将新节点设置为当前所选节点
setListData([...listData, newNode]);
}else{
// 将新的树形节点附加到现有列表数据中
setListData([...listData, TreeNode]);
}
};
二级节点新建代码
//保存项目定义
const ObjectSave = (data, nodeId) => {
debugger
const treeDataForListItem = getTreeDataForListItem(nodeId); // 获取与目标列表项关联的树形数据
//创建一个名为 addDataToNode 的函数，该函数将遍历树形结构并在找到匹配的节点时向其 children 数组中添加新节点。
//在这个函数中，我们使用递归方式遍历树形结构，并搜索与指定节点 ID 匹配的节点。
//一旦找到匹配的节点，我们将检查其 children 属性是否存在。如果不存在，则创建一个空数组。
//然后，我们将新节点数据推送到 children 数组中，并终止循环。
const addDataToNode = (data, nodeId, newNodeData) => {
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item.value === nodeId) {
if (!item.children) {
item.children = []; // 如果子节点数组不存在则先创建一个
}
item.children.push(newNodeData);
break;
} else if (item.children && item.children.length > 0) {
addDataToNode(item.children, nodeId, newNodeData);
}
}
};
const newNodeData = {
title: (
<span>
{data.Objectnumber}
<SolutionOutlined onClick={()=>showModalProDrawer(data) } style={{ marginLeft: '15px', marginRight: '5px' }}/>
<PlusCircleOutlined onClick={showModalInter} style={{ marginLeft: '5px', marginRight: '5px' }} />
{/* <SolutionOutlined onClick={()=>showModalDrawer(data) } style={{ marginLeft: '15px', marginRight: '5px' }}/>
<SearchOutlined onClick={showModalMeta} style={{ marginLeft: '5px', marginRight: '5px' }}/>
*/}
</span>
),
value: randomId,
children: [],
};
debugger
//获取父节点的现有 children 数组并向其中添加新节点
const newData = [...treeDataMap[nodeId]];
//这将复制父节点的 children 数组，并将其存储在 newData 变量中。
addDataToNode(newData, nodeId, newNodeData);
//更新 treeDataMap 对象，以反映添加的更改。首先，复制 treeDataMap 对象并将更新后的 children
//数据设置为父节点的新值：
const newTreeDataMap = { ...treeDataMap };
newTreeDataMap[nodeId] = newData;
//调用 setTreeDataMap 函数并将新的 treeDataMap 对象作为参数传递
setTreeDataMap(newTreeDataMap);
};
三级节点新建代码
const FormSave = (data, parentId, checkedList) => {
debugger
const TreeDataForListForm = getTreeDataForListForm(parentId); // 获取与目标列表项关联的树形数据
const addDataToNode = (data, parentId, newNodeData) => {
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item.value === parentId) {
if (!item.children) {
item.children = []; // 如果子节点数组不存在则先创建一个
}
item.children.push(newNodeData);
break;
} else if (item.children && item.children.length > 0) {
addDataToNode(item.children, parentId, newNodeData); // 将 nodeId 改为 parentId
}
}
};
const newNodeData = {
title: (
<span>
{data.FormName}
<SolutionOutlined onClick={()=>showModalProDrawer(data) } style={{ marginLeft: '15px', marginRight: '5px' }}/>
<PlusCircleOutlined onClick={showModalInter} style={{ marginLeft: '5px', marginRight: '5px' }} />
</span>
),
value: randomId,
};
//获取父节点的现有 children 数组并向其中添加新节点
const newData = [...treeDataMap[parentId]];
//这将复制父节点的 children 数组，并将其存储在 newData 变量中。
addDataToNode(newData, parentId, newNodeData);
//更新 treeDataMap 对象，以反映添加的更改。首先，复制 treeDataMap 对象并将更新后的 children
//数据设置为父节点的新值：
const newTreeDataMap = { ...treeDataMap };
newTreeDataMap[parentId]= newData;
//调用 setTreeDataMap 函数并将新的 treeDataMap 对象作为参数传递
setTreeDataMap(newTreeDataMap);
};
供三级节点使用获取数据方法
const getTreeDataForListForm = (parentId) => {
for (const key in treeDataMap) {
if (Object.prototype.hasOwnProperty.call(treeDataMap, key)) {
const node = treeDataMap[key].find(item => item.value === parentId);
console.log("节点集合数据value值:",treeDataMap[key].find(item => item.value === parentId));
if (node) {
console.log("找到了:",node);
return node;
}
Object.values(treeDataMap).forEach(nodes => {
nodes.forEach(node => {
console.log("节点集合数据value值",node.value);
});
});
}
}
}
数据渲染与控件绑定
<List style={{width:'50%',height:'600'}}
itemLayout="horizontal"
dataSource={listData}
renderItem={(item, index) => (
<Collapse bordered>
<Panel header={item.title} key={index}>
<List.Item.Meta
avatar={<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
description="This is a solution project for generating Word documents"
/>
{/* 在 TreeSelect 中通过 getTreeDataForListItem 函数获取子节点列表数据 */}
<TreeSelect {...tProps} onSelect={onSelect}
treeData={getTreeDataForListItem(item.value)}
/>
</Panel>
</Collapse>
)}
/>
图文描述
如果有不明确的地方可以私信我，该问题比较复杂
可能原因是 getTreeDataForListItem 函数没有返回正确的数据，可以尝试修改函数如下:
const getTreeDataForListItem = (id) => {
if (treeDataMap[id] && treeDataMap[id][0].children) {
return treeDataMap[id][0].children;
}
return [];
};
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7669069