如何 return 对象 Object.keys Javascript

Question

我如何 return 在 Javascript 中使用 Object.keys 对象，React？我想将我的状态设置成这样：

dataset = [
{id:1,text_1:root,father:null,color:"#FF5722"},
{id:2,text_1:child1,father:1,color:"#FFC107"},
{id:3,text_1:child2,father:1,color:"#FFC107"},
{id:4,text_1:child3,father:1,color:"#FFC107"},
{id:5,text_1:child11,father:2,color:"#8BC34A"},
{id:6,text_1:child12,father:2,color:"#8BC34A"},
{id:7,text_1:child13,father:2,color:"#8BC34A"}
]

来自这个对象：

{
"root":{
   "child1":{
      "child11":[
         "data"
      ],
      "child12":[
         "data",
         "data",
         "data"
      ],
      "child13":[
         "data"
      ],
      "child14":[
         "data",
      ]
   },
   "child2":{
      "child21":[
         "data"
      ],
      "child22":[
         "data",
         "data",
         "data"
      ],
      "child23":[
         "data"
      ],
      "child24":[
         "data"
      ]
   },
   "child3":{
      "child31":[
         "data"
      ],
      "child32":[
         "data"
      ],
      "child33":[
         "data"
      ],
      "child34":[
         "data",
      ]
   },
   "child4":{
      "child41":[
         "data"
      ],
      "child42":[
         "data",
         "data",
         "data"
      ],
      "child43":[
         "data"
      ],
   },
},
"root1":{
    ...
}
}

我试过了：

setTree([
            {
              id: 1,
              text_1: props.pickedRoot,
              father: null,
              color: "#FF5722",
            },
            Object.keys(res.data.treeData[0][props.pickedRoot]).map(
              (item, i) => ({
                id: i + 2,
                text_1: item,
                father: 1,
                color: "#FFC107",
              })
            ),
          ]);

它几乎可以工作，除了 Object.keys return 是一个数组，因此它给了我一个对象和一个对象数组。也许问题是我单独设置了我的根对象，但我真的不知道我怎么能只用一个 map() 函数来设置它。

我的解决方案得到的结果：

0: {id: 1, text_1: "root", father: null, color: "#FF5722"}
1: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

我希望我能清楚地解释我的问题。

Answer 1

map 函数 returns 一个数组，这就是为什么你最终在你的数组中有另一个数组。我建议您将 map 返回的数组与 spread operator(...):

展开

setTree([
            {
              id: 1,
              text_1: props.pickedRoot,
              father: null,
              color: "#FF5722",
            },
            ...Object.keys(res.data.treeData[0][props.pickedRoot]).map(
              (item, i) => ({
                id: i + 2,
                text_1: item,
                father: 1,
                color: "#FFC107",
              })
            ),
          ]);

这样，除了您的第一个对象

之外，您基本上将所有新映射的对象都散布到 tree 数组中

评论回复

回复您的评论，您可以使用flatMap if your version supports it, or use an implemented flatMap function from a 3rd party library like lodash

Answer 2

所以我刚刚创建了这个函数来将您的对象转换为数组：

const objToArray = (father, root, globalIndex) => {
const keys = Object.keys(root);

  return keys.reduce((acc, curr) => {
    globalIndex++;
    const id = globalIndex;
    acc.push({
      id,
      text: curr,
      father,
    });
    console.log(globalIndex, acc);
    const children = root[curr];
    if (children.length === undefined) {
      acc.push(...objToArray(id, root[curr], globalIndex));
    }
    globalIndex = acc[acc.length - 1].id;
    return acc;
  }, []);
};

这个returns个n根元素，可以处理一个n层的对象。

如何 return 对象 Object.keys Javascript

How to return Objects with Object.keys Javascript

javascript

arrays

tree

object

reactjs

评论回复