Javascript 为antd树选择动态创建Json

我有以下格式的Json

[{
"shortName": "e2e",
"displayName": "E2E",
"description": "This is demo managed product",
"vertical": "Finance"   
},
{
    "shortName": "sfdsgs",
    "displayName": "fsaewgs",
    "description": "anything",
    "vertical": "Community"
},
{
    "shortName": "fga",
    "displayName": "xcdf",
    "description": "agfsf",
    "vertical": "Finance"
}]

我想使用这个json来显示基于垂直方向的antd树选择中的选项项。 ，我正在使用的Antd树选择是

 <TreeSelect
  placeholder="Filter here"
  dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
  style={{ width: "100%" }}
  treeData={data}
  treeCheckable={true}
  onChange={onChange}
  treeIcon={true}
/>

---

我正在使用react钩子，有人能帮我将上面的json转换为select所需的格式树，以便输出如图所示。

我在CodeSandBox上做了演示 首先，我基于“垂直”值创建了不同的数据，然后使用map函数为selectTree数据创建了子级。 我希望这能帮助你：）

---

我在CodeSandBox上做了演示 首先，我基于“垂直”值创建了不同的数据，然后使用map函数为selectTree数据创建了子级。 我希望这能帮助你：）

---

您必须将数组转换为TreeSelect接受的格式，该格式在文档中有所提及。我建议您先尝试使用类，然后将其更改为使用挂钩的函数，因为当您填充文档中要求的结构时，您将更容易迁移它。我可以框定json并将动态生成的json存储在一个状态变量中，并将该状态变量传递给TreeSelect，但它不显示该节点的子节点，即它显示的是真实的而不是垂直的子节点（Fiance和community），我遵循官方文档。您必须将数组转换为TreeSelect接受的格式，这在文档中有所提及。我建议您首先尝试使用类，然后将其更改为使用挂钩的函数，因为当您填充文档中要求的结构时，您将更容易迁移它。我可以构建json框架，将动态生成的json存储在状态变量中，并将该状态变量传递给TreeSelect，但它不显示该节点的子节点，即它显示的是真实的而不是垂直的子节点（Fianace和community），我遵循的是官方文档。

const ConvertToTreeNode = () => {
 const distinctData = [...new Set(OriginalJson.map(x => x.vertical))];
 return [{
  title: "Vertical",
  value: "0-0",
  key: "0-0",
  children: distinctData.map((x, index) => ({
   value: `0-0-${index}`,
   key: `0-0-${index}`,
   title: x
  }))
 };
}];