带有扩展运算符的 setState

Question

我正在学习 React 中的表单，我遇到了以下代码，其中单个 setState 方法用于多个输入以更新用户提供的值。谁能解释一下传播运算符在这里做什么，它在 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;**

来源：https://medium.com/@agoiabeladeyemi/the-complete-guide-to-forms-in-react-d2ba93f32825

Answer 1

它使用formControls 键创建一个新对象，该键的值由this.state.formControls 中的所有属性组成（基本上是旧状态的浅拷贝）。然后[name]: {...this.state.formControls[name], value} 部分用一个新对象覆盖等于name 的键，该对象由this.state.formControls[name] 的当前属性和用value 中的内容覆盖的键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
        }
    }
});

或者简单地说它设置了当前状态的副本，但是将state.formControls[name] 中的value 更改为value 中的内容，作为新状态。

Answer 2

React 中的 setState 不应该改变状态。而是在扩展运算符的帮助下创建了一个包含旧值和新 [name] 属性的新对象。