Question

在我的react项目中，我得到了以下结构（带有键的对象的对象）：

const listItems = {
  1:{
    id: 1,
    depth: 0,
    children: [2,5]
  },
  2:{
    id: 2,
    depth: 1,
    children: [3,4],
    parentIndex: 1, 
    disabled: false 
  },
  3:{
    id: 3,
    depth: 2,
    parentIndex: 2,
    disabled: false
  },
}

这样做之后：

let listItemsModified = Object.keys(listItems).map((i, listItem, inputArray) => {

 listItems[i]._styles = {
    root: {overflow: 'hidden'}
 };
  return listItems[i];
});

我只得到对象数组：

[ 
  {
    id: 1,
    depth: 0,
    children: [2,5],
    _styles: 'some styles here'
  },{
    id: 2,
    depth: 1,
    children: [3,4],
    parentIndex: 1, 
    _styles: 'some styles here',
    disabled: false 
  },
  {
    id: 3,
    depth: 2,
    parentIndex: 2,
    _styles: 'some styles here',
    disabled: false
  }
]

但是我需要一个像最初一样的对象，像这样：

{
  1:{
    id: 1,
    depth: 0,
    _styles: 'some styles here',
    children: [2,5]
  },
  2:{
    id: 2,
    depth: 1,
    children: [3,4],
    parentIndex: 1, 
    _styles: 'some styles here',
    disabled: false 
  },
  3:{
    id: 3,
    depth: 2,
    parentIndex: 2,
    _styles: 'some styles here',
    disabled: false
  },
}

我尝试过这样的事情：

Object.keys(listitemsModified).reduce((array, key) => {
    return {key: listitemsModified[key]}
}, {})

但是我只得到1个对象而不是对象。任何想法如何解决此问题将受到欢迎。谢谢

Answer 1

类似的事情应该适用于原始的listItems：

    const listItems = {
      1:{
        id: 1,
        depth: 0,
        children: [2,5]
      },
      2:{
        id: 2,
        depth: 1,
        children: [3,4],
        parentIndex: 1, 
        disabled: false 
      },
      3:{
        id: 3,
        depth: 2,
        parentIndex: 2,
        disabled: false
      },
    }

    const result = Object.keys(listItems).reduce((acc, key) => {
        acc[key] = {
            ...listItems[key],
            _styles: {
                root: {overflow: 'hidden'}
            }
        };
        return acc;
    }, {});
    
    console.log(result);

Answer 2

尝试一下：

Object.keys(listitemsModified).reduce((array, key) => {
    return {
      ...array,
      [key]: listitemsModified[key],
    }
}, {})

我照原样保留了变量名，但是array实际上不是数组，而是reduce函数的状态（最初是{}，在每次迭代中都是展开）。我认为更好的名字应该是accumulator / acc

Answer 3

您可以使用reduce来应用样式并返回原始结构，而不是两次转换结构：

const listItems = {
  1: { id: 1, depth: 0, children: [2,5] },
  2: { id: 2, depth: 1, children: [3,4], parentIndex: 1, disabled: false },
  3: { id: 3, depth: 2, parentIndex: 2, disabled: false }
}

const styles = { root: { overflow: 'hidden' } }

console.log(Object.entries(listItems).reduce((a, [k,v]) => ({...a, [k]: {...v, _styles: styles}}), {}))

Answer 4

尝试一下：

listitemsModified.reduce((acc, cur, i) => {
    acc[i+1] = cur;
    return acc },{})

反应将数组转换为对象的对象

4 个答案: