首页 新闻 会员 周边

React 18.2 获取数组对象中数据 并给对象重新进行赋值

0
[待解决问题]

我编写了一个集合嵌套树形控件的列子:
集合包括树形控件,控件又分为一级节点 二级节点 三级节点
我现在新建三级的节点的时候遇到了问题无法新建，我二级节点新建是根据一级节点数据进行新建的。
那我在新建三级节点的时候应该是按照二级节点数据进行新建，目前我就是无法获取到二级节点中的数据。
一下是部分的代码：

关键变量声明:
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>

    )}
  />![](https://img2023.cnblogs.com/q/1868478/202306/1868478-20230605102546163-1116953844.png)

昱昇的主页 昱昇 | 初学一级 | 园豆：160
提问于：2023-06-05 10:25
< >
分享
所有回答(1)
0

根据你提供的代码，你遇到的问题是无法获取二级节点中的数据来进行三级节点的新建。以下是可能的解决方案：

确保你在二级节点新建时正确地将数据添加到 treeDataMap 中。你可以在二级节点新建代码的末尾添加以下代码来验证：
javascript
Copy code
console.log("newTreeDataMap:", newTreeDataMap);
确保 newTreeDataMap 中包含了二级节点的数据。

确保你在三级节点新建时调用了正确的方法来获取二级节点的数据。在 FormSave 函数中，你使用了 getTreeDataForListForm 方法来获取二级节点数据，但你没有在提供代码中展示该方法的实现。请确保你的 getTreeDataForListForm 方法能够正确地从 treeDataMap 中获取到对应的二级节点数据。

如果你在获取二级节点数据时遇到问题，可以尝试通过调试工具（如 Chrome 开发者工具）在浏览器中查看 treeDataMap 对象的结构和内容，以确保二级节点数据已经正确添加到了 treeDataMap 中。

请注意，以上是根据你提供的部分代码进行的推测和建议。如果你能提供更多关于 getTreeDataForListForm 方法的实现代码或更多与问题相关的信息，我可以提供更具体的帮助。

Technologyforgood | 园豆：5633 (大侠五级) | 2023-06-05 21:42
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。