React TreeView嵌套对象数组更新失败，求实现父子复选框联动

在React中实现TreeView组件时，无法正确更新嵌套对象数组的选中状态。期望点击父复选框时，自动选中所有层级的子复选框（例如点击「Mammal」时，自动选中Canidae、Dog、Fox、Wolf等所有子节点），但当前代码仅能修改单个节点的checked值，无法联动更新嵌套的子对象。恳请帮忙排查并修复代码，实现父节点复选框联动选中所有子节点的功能。

数据结构 #

const data = [
  {key: "mammal", label: "Mammal", isFolder: true, checked: false, nodes: [{key: "canidae", label: "Canidae", checked: false, nodes: [{key: "dog", label: "Dog", checked: false, nodes: [], url: "https://www.google.com/search?q=dog"},{key: "fox", label: "Fox", checked: false, nodes: [], url: "https://www.google.com/search?q=fox"},{key: "wolf", label: "Wolf", checked: false, nodes: [], url: "https://www.google.com/search?q=wolf"}], url: "https://www.google.com/search?q=canidae"}], url: "https://www.google.com/search?q=mammal"},
  {key: "reptile", label: "Reptile", isFolder: true, checked: false, nodes: [{key: "squamata", label: "Squamata", checked: false, nodes: [{key: "lizard", label: "Lizard", checked: false, nodes: [], url: "https://www.google.com/search?q=lizard"},{key: "snake", label: "Snake", checked: false, nodes: [], url: "https://www.google.com/search?q=snake"},{key: "gekko", label: "Gekko", checked: false, nodes: [], url: "https://www.google.com/search?q=gekko"}], url: "https://www.google.com/search?q=squamata"}], url: "https://www.google.com/search?q=reptile"}
];

当前递归更新代码 #

const updateObject = (labelkey, objectData, value) => {
    return objectData.map((object) => {
      if (object.label.trim() === labelkey.trim()) {
        object.checked = value;
      } else {
        if (
          object.nodes &&
          object.nodes.length > 0 &&
          typeof object.nodes === "object" &&
          object.nodes !== null
        ) {
          object.nodes = updateObject(labelkey, object.nodes, value);
        }
      }
      return object;
    });
  };
  
  const checkBoxChicked = (label) => {
    var newData = JSON.parse(JSON.stringify(treeData));
    const result = updateObject(label.label, newData, !label.checked);
    var resultData = JSON.parse(JSON.stringify(result));
    setTreeData(resultData);
  };

组件渲染代码 #

return (
    <div style={{ paddingLeft: "20px" }}>
      {treeData?.map((parent) => {
        return (
          <div key={parent.label}>
            {parent.isFolder && (
              <div className="parent">
                <input
                  type="checkbox"
                  id={parent.label}
                  name={parent.label}
                  value={parent.label}
                  checked={parent?.checked ? parent.checked : false}
                  onClick={() => checkBoxChicked(parent)}
                />
                <label for={parent.label}> {parent.label}</label>
              </div>
            )}
            {!parent.isFolder && (
              <div style={{ paddingLeft: "32px" }}>
                <input
                  type="checkbox"
                  id={parent.label}
                  name={parent.label}
                  value="Bike"
                  checked={parent?.checked ? parent.checked : false}
                  onClick={() => checkBoxChicked(parent)}
                />
                <label for={parent.label}>{parent.label}</label>
              </div>
            )}
            <div>
              {parent.nodes && parent.nodes.length > 0 && (
                <Family familyTree={parent.nodes} />
              )}
            </div>
          </div>
        );
      })}
    </div>
  );

内容的提问来源于stack exchange，提问作者SATISH RAJNALE