Reactjs 使用扩展运算符设置状态

我在React中学习表单，遇到下面的代码，其中一个setState方法用于多个输入，以更新用户提供的值。有人能解释一下spread运算符在这里做什么吗？它在setState方法中包含什么

  class FormContainer extends Component {

  constructor () {

  this.state = {
      formControls: {
          email: {
            value: ''
          },
          name: {
            value: ''
          },
          password: {
            value: ''
          }
      }
  }

}

 changeHandler = event => {

  const name = event.target.name;
  const value = event.target.value;

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


  render() {
     return (
      <form>

          <input type="email" 
                 name="email" 
                 value={this.state.formControls.email.value} 
                 onChange={this.changeHandler} 
          />

          <input type="text" 
                 name="name" 
                 value={this.state.formControls.name.value} 
                 onChange={this.changeHandler} 
          />

          <input type="password" 
                 name="password" 
                 value={this.state.formControls.password.value} 
                 onChange={this.changeHandler} 
          />

       </form>      
     );
   }

}

 export default FormContainer;**

类FormContainer扩展组件{
构造函数（）{
此.state={
表单控件：{
电邮：{
值：“”
},
姓名：{
值：“”
},
密码：{
值：“”
}
}
}
}
changeHandler=事件=>{
const name=event.target.name；
常量值=event.target.value；
这是我的国家({
表单控件：{
…this.state.formControls，
[姓名]：{
…this.state.formControls[名称]，
价值
}
}
});
}
render（）{
返回(
);
}
}
导出默认FormContainer**

---

来源：

它创建了一个带有键

formControls

的新对象，该键的值由

this.state.formControls

中的所有属性组成（基本上是旧状态的浅拷贝）。

[name]：{…this.state.formControls[name]，value}

部分然后用一个新对象覆盖等于

name

的键，该对象由

this.state.formControls[name]

中的当前属性和用

value

中的值覆盖的键组成：

this.setState({
    formControls: {
        ...this.state.formControls, // shallow copy of current state
        [name]: { // overrides key that equals what is in name
            ...this.state.formControls[name], // shallow copy of current states formControls[name]
            value // overrides value
        }
    }
});

---

或者简单地说它设置了当前状态的副本，但是

状态中的
值
。formControls[name]

更改为

值

中的值，作为新状态。

React中的setState不应突变状态。相反，在spread运算符的帮助下，将创建一个包含旧值和新[name]属性的新对象。

如果要保留其他字段/输入的当前值，则需要该对象。。。用于创建新的状态对象-需要检测更新，决定是否需要重新提交我了解第一个…this.state.formControls，它更像以前的状态，之后我们不能简单地像[name]：value那样做吗？我们需要…this.state.formControls[name]？类似这样的东西-this.setState（prevState=>（{…prevState，name:evt.target.value，}））你能告诉我这里到底发生了什么-[name]：{…this.state.formControls[name]，value}在javascript中，在对象中有两个命名属性的选项：1。对象表示法2。括号符号。[姓名]是第二个。Name是html元素的Name属性。