Reactjs React中的树视图

这是我的数据：

{
  "studentId": "P1",
  "assignments": [
    {
      "CourseId": 111,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t1",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 112,
      "subjectId": "s1",
      "topics": [
        {
          "topicId": "t1",
          "isAssigned": false
        },
        {
          "topicId": "t2",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 111,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t3",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 113,
      "subjectId": "s2",
      "topics": [
        {
          "topicId": "t4",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 114,
      "subjectId": "",
      "topics": [
        {
          "topicId": "t5",
          "isAssigned": false
        }
      ]
    },
    {
      "CourseId": 115,
      "subjectId": "s4",
      "topics": [
        {
          "topicId": "t6",
          "isAssigned": false
        }
      ]
    }
  ],
  "updatedOn": null,
  "updatedBy": null
}

我正在尝试创建一个树状视图，以便对此作出反应。我正在使用“反应复选框树”。树视图将仅在assignments对象上创建，因为其余数据仅用于保存功能

我已经创建了基本架构，因为我需要在模态窗口中使用它。它可以很好地处理硬编码数据，但我发现很难将数据集转换为树视图所需的格式。下面是工作正常的硬编码对象

const nodes = [{
    value: 'mars',
    label: 'Mars',
    children: [
        { value: 'phobos', label: 'Phobos' },
        { value: 'deimos', label: 'Deimos' },
    ],
}];

---

试试下面的代码。这基本上是将所有第一个值转换成对象：<代码> {值…，标签…} /代码>如果你的代码中有任何特定的条件，它不应该考虑第一个对象，那么在你的问题中要提到它。

const赋值=[
{
“CourseId”：111，
“主语”：“主语”，
“主题”：[
{
“topicId”：“t1”，
“isAssigned”：错误
}
]
},
{
“CourseId”：112，
“主语”：“s1”，
“主题”：[
{
“topicId”：“t1”，
“isAssigned”：错误
},
{
“topicId”：“t2”，
“isAssigned”：错误
}
]
},
{
“CourseId”：111，
“主语”：“主语”，
“主题”：[
{
“topicId”：“t3”，
“isAssigned”：错误
}
]
},
{
“CourseId”：113，
“主语”：“s2”，
“主题”：[
{
“topicId”：“t4”，
“isAssigned”：错误
}
]
},
{
“CourseId”：114，
“主语”：“主语”，
“主题”：[
{
“topicId”：“t5”，
“isAssigned”：错误
}
]
},
{
“CourseId”：115，
“主观性”：“s4”，
“主题”：[
{
“topicId”：“t6”，
“isAssigned”：错误
}
]
}
];
常量映射赋值=（对象，键）=>（{value:key，label:object[key]}）；
console.log（assignments.map）（ass=>{
让assObj={…mapsignment（ass，'CourseId'）}；
if（ass.subject）{
assObj['children']=mapAssignment（ass，'subjectId'）；
如果（ass.topics.length>0）assObj['children']['children']=ass.topics.map（child=>mapAssignment（child'topicId'））
}
如果（ass.topics.length>0）assObj['children']=ass.topics.map（child=>mapAssignment（child，'topicId'））
返回assObj；
}));是否希望最终输出如下所示<代码>常量节点=[{value:'111'，标签：'CourseId'，子节点：[{value:'t1'，标签：'t1'}]，}，{value:'111'，标签：'CourseId'，子节点：[{value:'t1'，标签：'t1'}，{value:'t2'，标签：'t2'}，]，}]嘿@NeelDsouza！是的，这是正确的，请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。嗨@Neel Dsouza！它起作用了，但没有显示主题。在我的对象中，层次结构应该是课程->主题->主题，如果主题是“”，那么主题应该直接位于课程之下。你几乎做到了我需要的，我很感激，但你也能帮我吗？我不明白。u plz是否可以像您所希望的那样为subject=”“添加结果节点值。对不起，如果您查看对象，您会看到CourseId，然后是SubjectId，然后是Topics，这是一个数组。所以我想让它显示CourseId作为父母，然后作为第一个孩子被主体化，然后作为孙辈被主题化。如果主题为空或“”，则主题应直接位于课程更新我的答案下。