Question

我的状态对象为：

this.state = {
    letterType: {},
    letterTag: {},
    departmentName: {},
    assignedOfficer: {}
}

，我还有另一个对象sortFilters为：

sortFilters = {
    letterType: {
        0: "letterType1",
        1: "letterType2"
    },
    letterTag: {},
    departmentName: {
        0: "dept1"
    },
    assignedOfficer: {}
}

现在我要创建一个newState对象（可能使用es6 reduce()），该对象将基于sortFilters对象创建，例如：

this.newState = {
    letterType: {
        letterType1: true,
        letterType2: true
    },
    letterTag: {},
    departmentName: {
        dept1: true
    },
    assignedOfficer: {}
}

我认为使用es6 reduce（）可以实现此目的，但我无法使其正常工作。

Answer 1

如上所述，您的问题是Object.assign的用例，因为您只想将四个对象（在sortFilters上）的内容复制到状态对象中。您可以手动执行以下操作：

Object.assign(this.newState.letterType,      sortFilters.letterType);
Object.assign(this.newState.letterTag,       sortFilters.letterTag);
Object.assign(this.newState.departmentName,  sortFilters.departmentName);
Object.assign(this.newState.assignedOfficer, sortFilters.assignedOfficer);

...或循环：

for (const name of Object.keys(sortFilters)) {
    Object.assign(this.newState[name], sortFilters[name]);
}

该合并来自sortFilters对象的条目与this.newState中的条目。如果您想替换它们，则可以使用赋值（可能是浅表副本，但这取决于以后使用sortFilters的方式）：

this.newState.letterType      = Object.assign({}, sortFilters.letterType);
this.newState.letterTag       = Object.assign({}, sortFilters.letterTag);
this.newState.departmentName  = Object.assign({}, sortFilters.departmentName);
this.newState.assignedOfficer = Object.assign({}, sortFilters.assignedOfficer);

或

for (const name of Object.keys(sortFilters)) {
    this.newState[name] = Object.assign({}, sortFilters[name]);
}

请注意，Object.assign进行浅复制；如果这些对象中的任何一个嵌套，您将需要其他东西。

从ES2018开始，您可以在创建新的objets而不是Object.assign时使用属性传播：

for (const name of Object.keys(sortFilters)) {
    this.newState[name] = {...sortFilters[name]};
}

Answer 2

还有其他方法可以达到相同的目的，因为reduce用于数组。但是，如果使用reduce是一种实践，那么可以，是的，一种大概的方法可能如下所示：在对象的键（数组）上使用reduce。

let state = {letterType: {},letterTag: {},departmentName: {},assignedOfficer: {}}

let sortFilters = {letterType: {0: "letterType1",1: "letterType2"},letterTag: {},departmentName: {0: "dept1"},assignedOfficer: {}}

let newState = Object.keys(state).reduce(function(prev, current) {
  let val = sortFilters[current]
  if (!val) {
    prev[current] = state[current]
  } else {
    prev[current] = Object.keys(val).reduce(function (p, c) {
      p[val[c]] = true
      return p
    }, {})
  }
  return prev
}, {})

console.log(newState)

有关reduce和Object.keys的更多详细信息，请参阅Mozilla开发人员网络的文档。

Answer 3

不确定在这种情况下“状态”或this.state的含义是...反应吗？无论如何，tt似乎只是想简单地解压缩某些属性并对其进行操作。如果这样的话，破坏性分配可能会有所帮助。请参阅Destructuring Nested Objects上的本文部分以及 Nested object and array destructuring 上的本部分

演示

let sortFilters = {
    letterType: {
        0: "letterType1",
        1: "letterType2"
    },
    letterTag: {},
    departmentName: {
        0: "dept1"
    },
    assignedOfficer: {}
}

// Making a copy of sortFilters
let final = JSON.parse(JSON.stringify(sortFilters));

// Desruturing final, assigning variables and values
let {
   letterType: {
       letterType1: letterType1 = true,
       letterType2: letterType2 = true
   },
   letterTag: {},
    departmentName: {
        dept1: dept1 = true
    },
    assignedOfficer: {}
} = final;

console.log(letterType1);
console.log(letterType2);
console.log(dept1);

使用es6 reduce（）使用另一个对象来操纵一个对象

3 个答案:

演示