反应 setState 混合对象

Question

我的组件显示了一个包含在对象中的名字/姓氏/等的联系人

  getInitialState: function () {
    return ({
      contact: {},
      edit: false,
      editedContact: {}
    });
  },

进行ajax调用后，我将信息存储在state.contact和editedcontact中

  success: function (payload) {
    that.setState({ contact: payload.result, editedContact: payload.result});
  }

我有一个 toggleEdit 函数来决定我将呈现什么 - 联系人视图或用于编辑联系人的输入

  toggleEdit: function () {
    this.setState({
      edit: true,
    });
  },

   render: function () {
    if(!this.state.edit){
      var output = (
        <div>
          <div className="panel panel-default">
            <div className="panel-heading">{this.state.contact.firstName</div>
            ...
        </div>
      );
    } else {
      output = (
        <span className="cancel" onClick={this.cancelEdit}>Cancel</span>
          <form onSubmit={this.handleSubmit}>
                  <input className="form-control" id="first-name" type="text" onChange={this.handleChange.bind(this, "firstName")} value={this.state.editedContact.firstName}/>
            ...

表单的值已经与我的editedContact同步，以便于用户体验和onChange，他们更新了editedContact

  handleChange: function (paremeter, e) {
    console.log(this.state.contact.lastName);
    console.log(this.state.editedContact.lastName);
    var editedContact = this.state.editedContact;
    editedContact[paremeter] = e.target.value;
    this.setState({editedContact: editedContact});
  }

我的 cancelEdit 将 edit 状态更改回 true 以再次查看联系人，但我不明白为什么我仍然在此视图中看到对 editContact 所做的更改。我的handleChange 只更新editedContact 状态，而不是联系人状态，那么为什么我会通过控制台日志看到对联系人状态的更改？

Answer 1

我认为这是由于突变错误。尤其是这些行：

success: function (payload) {
    that.setState({ contact: payload.result, editedContact: payload.result});
}

您正在做的是将这两个键中的每一个设置为 REFERENCE payload.result。意思是，如果你在哪里更改payload，那么contact 和editedContact 都会发生突变。当您执行 var editedContact = this.state.editedContact 然后更改参数时，您就是这样做的。

要测试是否发生这种情况，请在设置之前尝试克隆有效负载：

success: function (payload) {
    that.setState({ contact: {...payload.result}, editedContact: {...payload.result}});
}

或者没有展开运算符：

success: function (payload) {
    that.setState({ 
        contact: Object.assign({}, payload.result), 
        editedContact: Object.assign({}, payload.result)
    });
}

让我们知道这是否可行！