javascript - 具有键嵌套状态的动态 setState()

Question

我在组件中有一个方法。我想使用嵌套对象数组中的键动态设置状态。

method = (name, value) => {
    console.log(name)
    //a  //value is 1
    //b  //value is 2
    //c  //value is 3
    this.setState({ [name]:value })
}

当它没有被嵌套时，它动态地改变状态成功。然而，当它嵌套时

 method = (name, value) => {
    this.setState({
        ArrayOfObjects:[{
            [name] : value
    }]
 }

我的状态变成了

state = {
    ArrayOfObjects: [{
       c: 3
    }]
}

我要

state = {
    ArrayOfObjects: [{
        a: 1,
        b: 2,
        c: 3
    }]

怎么了？

Answer 1

您可以将一个元素推送到当前的 ArrayOfObjects。

ArrayOfObjects = this.state.ArrayOfObjects;
ArrayOfObjects.push({[name] : value});
this.setState({
    ArrayOfObjects
});

或者使用扩展运算符:

this.setState({
    ArrayOfObjects: [
        ...this.state.ArrayOfObjects,
        {[name] : value}
    ]
});