Javascript ReactJS：如何在树视图节点材质UI中展开和显示API调用？

我在React中有树状视图材质UI。是否有可能在单击节点后调用API，并将子节点附加到单击的节点，以便它不会更新到节点使用状态中的其他子节点

我使用的逻辑是在树视图中调用API。在响应之后，它会抛出数组，我必须使用map来显示这些数组。但当我单击第一个节点，然后单击另一个节点时，前一个节点的子节点将附加到第二个节点

<TreeView
  className={classes.root1}
  defaultExpandIcon={<ArrowDropDownIcon />}
  defaultCollapseIcon={<ArrowDropUpIcon />}
  defaultEndIcon={<ArrowDropDownIcon />}
  disableSelection={true}
  expanded={expanded}
  onNodeToggle={handleToggle}
>
  {renderTree(row, index)}
</TreeView>;

{renderTree（行，索引）}
;

渲染树函数：

const renderTree = (row, index) => {
  return (
    <StyledTreeItem
      style={{ padding: "3px", marginLeft: 18 }}
      onIconClick={() => {
        handleIconListItemOrgClick(row, index, index);
      }}
      onLabelClick={(event) =>
        handleLabelListOUItemClick(row, index, index, event)
      }
      key={row.organizationalUnitId}
      labelText={row.organizationalUnitName}
      labelIcon={AccountTree}
    >
      {Array.isArray(treeViewChildren.domainGroupList)
        ? treeViewChildren.domainGroupList.map((node, i) => {
            return (
              <StyledTreeItem
                id="exdendedG"
                style={{ padding: "3px", marginLeft: 18 }}
                onClick={(e) => handleTreeSubItems(e, node, i)}
                key={i}
                nodeId={node.groupId}
                labelText={node.groupName}
                labelIcon={GroupExpIcon}
              >
                {/* {renderTree(node)} */}
              </StyledTreeItem>
            );
          })
        : null}
    </StyledTreeItem>
  );
};

constrendertree=（行，索引）=>{
返回(
{
handleIconListItemOrgClick（行、索引、索引）；
}}
onLabelClick={（事件）=>
HandleLabelistouItemClick（行、索引、索引、事件）
}
key={row.organizationalUnitId}
labelText={row.organizationalUnitName}
labelIcon={AccountTree}
>
{Array.isArray（treeViewChildren.domainGroupList）
？treeViewChildren.domainGroupList.map（（节点，i）=>{
返回(
handletresubitems（e，node，i）}
key={i}
nodeId={node.groupId}
labelText={node.groupName}
labelIcon={GroupExpIcon}
>
{/*{renderTree（node）}*/}
);
})
：null}
);
};

API调用的函数为：

const [expanded, setExpanded] = useState('');
const [treeViewChildren, setTreeViewChildren] = useState({});
const handleIconListItemOrgClick = (row, index, nodeId) => {
  setExpanded([`${nodeId}`]);
  console.log(row.organizationalUnitDistinguishName);

  var expanded = JSON.stringify({
    option: "GetSubObjectList",
    distinguishedUserName: row.organizationalUnitDistinguishName,
  });
  const result = ApiService(expanded);
  //---------->Groups Lists<--------------
  result.then((response) => {
    const item = response;
    item.domainGroupList.forEach(function (gr) {
      gr.groupImportedAs = "Normal";
    });
    setTreeViewChildren(item);

    console.log("Server response", item);
  });
};

const[expanded，setExpanded]=useState（“”）；
const[treeViewChildren，setTreeViewChildren]=useState（{}）；
常量handleIconListItemOrgClick=（行、索引、节点ID）=>{
setExpanded（[`${nodeId}`]）；
console.log（row.organizationalUnitName）；
var expanded=JSON.stringify({
选项：“GetSubObjectList”，
DifferentizedUserName:row.OrganizationAlUnitDifferenticationName，
});
const result=ApiService（扩展）；
//---------->组列表{
常数项=响应；
item.domainGroupList.forEach（函数（gr）{
gr.groupImportedAs=“正常”；
});
setTreeViewChildren（项目）；
日志（“服务器响应”，项）；
});
};

---

如何使用索引将子节点附加到节点上？。单击其他节点时，不应附加其他节点的子节点？

尝试添加

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

在你点击手柄时，我已经试过了，但不起作用。修改react代码后，它将处于工作模式。