我如何通过 React JS 中的变量 map

Question

我正在使用 react-tree-graph 并且正在创建数据 object 但我想使用我的后端 api 来填写数据 object 的属性。 我尝试使用 .map 方法循环通过我的 api 但我不知道如何让它工作。 这是来自我的 api 的数据 object 及以下是我的 object。

let data =  { 
    name: 'Water',
    children: [
      {
        name: 'Earth',
        children: [
          {
            name: 'Air',
            children: [
              {
                name: 'Fire',
                children: [],
              },
              {
                name: 'Fire2',
                children: [],
              },
            ],
          },
          {
            name: 'Air2',
            children: [
              {
                name: 'Fire3',
                children: [],
              },
              {
                name: 'Fire4',
                children: [],
              },
            ],
          },
        ],
      },

      {
        name: 'Earth2',
        children: [
          {
            name: 'Air3',
            children: [
              {
                name: 'Fire5',
                children: [],
              },
              {
                name: 'Fire6',
                children: [],
              },
            ],
          },
          {
            name: 'Air4',
            children: [
              {
                name: 'Fire7',
                children: [],
              },
              {
                name: 'Fire8',
                children: [],
              },
            ],
          },
        ],
      },
    ],
  };

而不是字符串我想通过这个变量 map 并用 object 这样填充它

flower= {water: "name1",air: "name2",air2: "name3",air3: "name4",air4: "name5",earth: "name6",earth2: "name7",fire: "name8",fire2: "name9",fire3: "name10",fire4: "name11",fire5: "name12",fire6: "name13",fire7: "name14",fire8: "name15"}

我只是想知道如何通过它使用这个 object 和 map 来填充数据 object 内部的不同属性

Answer 1

这是您的问题的解决方案，我使用递归。

 let data = { name: 'Water', children: [ { name: 'Earth', children: [ { name: 'Air', children: [ { name: 'Fire', children: [], }, { name: 'Fire2', children: [], }, ], }, { name: 'Air2', children: [ { name: 'Fire3', children: [], }, { name: 'Fire4', children: [], }, ], }, ], }, { name: 'Earth2', children: [ { name: 'Air3', children: [ { name: 'Fire5', children: [], }, { name: 'Fire6', children: [], }, ], }, { name: 'Air4', children: [ { name: 'Fire7', children: [], }, { name: 'Fire8', children: [], }, ], }, ], }, ], }; let counter = 1; function recursiveNaming(data) { return data.children.reduce((acc, curr) => { let obj; let currentObj = {...acc, [curr.name]:`name${counter++}`}; if(curr.children.length) { obj = recursiveNaming(curr); } return {...currentObj, ...obj }; },{}) }; console.log(recursiveNaming(data))

希望值得。...