React 18.2 获取对象中的子节点数据异常

我 treeDataMap 的数据结构是这样的:
SL-971510:
Array(1)
0: children: Array(1)0: children: []
title: {$$typeof: Symbol(react.element), type: 'span', key: null, ref: null, props: {…}, …}
value: "SL-864264"


SL-971510: 
Array(1)
0: children: Array(1)0: children: []
title: {$$typeof: Symbol(react.element), type: 'span', key: null, ref: null, props: {…}, …}
value: "SL-864264"

 const [treeDataMap, setTreeDataMap] = useState({}); // 添加 treeDataMap 状态
treeDataMap 不是空的 这个只是定义的方式

 const getTreeDataForListIInter = (id) => {
    debugger
    // 查找与 ID 相关联的节点
    const nodeToUpdate = findNodeById(treeDataMap, id);
  
    // 如果找到了节点，则更新其值
    if (nodeToUpdate) {
      const { value } = nodeToUpdate;
      console.log("子节点值:",value)
      return value;
     
    }
  
    // 返回结果
    if (treeDataMap[id]) {
      return treeDataMap[id];
    }
    return [];
  };



我要取到 SL-864264 这 value
const findNodeById = (node, id) => {
    if (node.value === id) {
      return node;
    } else if (node.children) {
   console.log("...");
    }else{
      for (let i = 0; i < node.length; i++) {
        console.log(".node属性..：",node);
        debugger
        if (node.children[i].value === id) {
          debugger
          return node.children[i];
        } else {
          const foundNode = findNodeById(node.children[i], id); // 
          if (foundNode) {
            return foundNode;
          }
        }
      }
    }
    return null;
  };

img

根据你提供的数据结构，treeDataMap 是一个对象，其中每个属性代表一个节点，它的值是一个数组。如果要获取 SL-864264 这个节点的 value 值，你可以按照以下方式进行操作：

首先需要获取到 SL-971510 这个节点，因为它是 SL-864264 的父节点。可以通过 findNodeById 函数查找：
const parentNode = findNodeById(treeDataMap, "SL-971510");
如果找到了 SL-971510 节点，则可以从它的 children 属性中查找子节点 SL-864264：

if (parentNode) {
  const childNode = parentNode.children.find((node) => node.value === "SL-864264");
  if (childNode) {
    const childValue = childNode.value;
    console.log("子节点值：", childValue);
  }
}

这段代码会在控制台输出 “子节点值：SL-864264”。

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客也许可以解决你的问题👉 ：react实现tree组件
  • 以下回答来自chatgpt:

    首先，根据您提供的数据结构，我们可以看到treeDataMap对象有一个名为0的属性，它包含子属性children。children属性包含一个长度为1的数组，其中有一个元素0，它也包含一个名为children的空数组。简单来说，您需要从对象的第一层开始遍历，然后检查它的属性。

    以下是一些可能有用的建议和prompt：

    1. 确保您使用的React版本是18.2，以充分利用新功能和优化。

    2. 确认您的treeDataMap对象确实存在，并且数据结构与您提供的相同。

    3. 如果treeDataMap对象中的子节点可能存在多个层级，请考虑使用递归来遍历每个子节点，并从中获取所需的数据。以下是一个递归函数的示例代码，它可以从treeDataMap对象中获取所有叶子节点的数据：

    function getAllLeafData(treeData) {
  // 如果当前节点没有children属性，则这是一个叶子节点，返回它的数据
  if (!treeData.children || treeData.children.length === 0) {
    return treeData.data; // 假设数据存在于叶子节点的data属性中
  }
  // 如果有children属性，则递归遍历每个子节点，并将它们的数据存储在一个数组中
  const childData = [];
  treeData.children.forEach((child) => {
    childData.push(getAllLeafData(child));
  });
  // 将子节点的数据合并到一个数组中并返回
  return [].concat(...childData);
}
    1. 如果您只需要获取直接子节点的数据，而不是递归遍历整个树，以下是一个简单的示例代码：
    const childrenData = treeDataMap[0].children.map((child) => {
  return child.data; // 假设每个子节点都有一个data属性
});

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^