Javascript 材质UI-树状视图数据结构

我想对从服务器获取的数据进行结构化，这样我就可以使用

materialui

中的

TreeView

组件：

我正在获取大量数据，因此当用户单击展开按钮时，我希望从服务器获取子节点。所以 扩展第一个节点时，会向服务器发送一个HTTP请求，该服务器返回该节点的所有子节点。当展开另一个节点时，将获取该节点的子节点等

在页面启动时，我希望获取根节点及其子节点。返回的JSON如下所示：

{
 "division": {
 "id": "1234",
 "name": "Teest",
 "address": "Oslo"
 },
 "children": [
   {
    "id": "3321",
    "parentId": "1234",
    "name": "Marketing",
    "address": "homestreet"
   },
   {
    "id": "3323",
    "parentId": "1234",
    "name": "Development",
    "address": "homestreet"
   }
 ]
}

{
  "children": [
    {
      "id": "2212",
      "parentId": "3321",
      "name": "R&D",
      "address": "homestreet"
    },
    {
      "id": "4212",
      "parentId": "3321",
      "name": "Testing",
      "address": "homestreet"
    }
  ]
}

当扩展

营销

节点时，我想进行一个HTTP调用以获取此节点的子节点。所以我会得到如下的JSON：

{
 "division": {
 "id": "1234",
 "name": "Teest",
 "address": "Oslo"
 },
 "children": [
   {
    "id": "3321",
    "parentId": "1234",
    "name": "Marketing",
    "address": "homestreet"
   },
   {
    "id": "3323",
    "parentId": "1234",
    "name": "Development",
    "address": "homestreet"
   }
 ]
}

{
  "children": [
    {
      "id": "2212",
      "parentId": "3321",
      "name": "R&D",
      "address": "homestreet"
    },
    {
      "id": "4212",
      "parentId": "3321",
      "name": "Testing",
      "address": "homestreet"
    }
  ]
}

---

但是我对如何创建这样一个数据结构感到困惑，这个数据结构以后可以用于我的

TreeView

组件。如何创建这样的结构？

它都是嵌套的

s。

子项

数组准确地转换为

s的数组。每个项目都需要知道其id，以便在单击时可以从服务器请求其子项。您真正需要做的就是渲染

this.props.children.map（item=>）

其中

MyTreeItem

是您的自定义版本，它通过一个获取调用来扩展原始版本。@ChrisG那么每个节点有一个

MyTreeItem

吗？是的，没错。你查过了吗？是的，我看过这个例子。我唯一的想法是，在某个时刻，我需要进行某种

if-else

检查节点之前是否已扩展。如果没有，我想给服务器打个电话。如果它已被打开、关闭，然后再次打开，我不想再次获取服务器数据，而是使用以前获取的数据。你的建议会使这成为可能吗？当然，那只是

状态

。fetch调用将填充

this.state.children

，因此打开节点只需检查它是否为空。它都是嵌套的

s。

子项

数组准确地转换为

s的数组。每个项目都需要知道其id，以便在单击时可以从服务器请求其子项。您真正需要做的就是渲染

this.props.children.map（item=>）

其中

MyTreeItem

是您的自定义版本，它通过一个获取调用来扩展原始版本。@ChrisG那么每个节点有一个

MyTreeItem

吗？是的，没错。你查过了吗？是的，我看过这个例子。我唯一的想法是，在某个时刻，我需要进行某种

if-else

检查节点之前是否已扩展。如果没有，我想给服务器打个电话。如果它已被打开、关闭，然后再次打开，我不想再次获取服务器数据，而是使用以前获取的数据。你的建议会使这成为可能吗？当然，那只是

状态

。fetch调用将填充

this.state.children

，因此打开节点只需检查其是否为空。