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}
    ]
});

Answer 2

假设ArrayOfObjects始终是一个具有单个对象的数组，并且您想将name / value合并到该对象中：

method(name, value) {
  // make a copy
  const ArrayOfObjects = [...this.state.ArrayOfObjects];
  // merge properties and set dynamic value
  ArrayOfObjects[0] = { ...ArrayOfObjects[0], [name]: value };

  this.setState({
    ArrayOfObjects
  });
}

这里是example的动作。

希望有帮助！

具有键嵌套状态的动态setState（）

2 个答案: