反应 setState 混合对象

Question

我的组件显示与 firstname/lastname/etc 保持在一个对象中的联系

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

拨打 ajax 电话后，我将信息存储在 state.contact 和编辑联系人

中

  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 将编辑状态更改回 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)
    });
}

让我们知道这是否有效！

反应 setState 混合对象

React setState mixing up objects

state

onchange

reactjs