Question

我的组件显示与对象中保存的firstname / lastname / etc的联系

  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}/>
            ...

表单的值已经与我编辑的联系人同步以便于用户体验和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)
    });
}

如果有效，请告诉我们！

React setState混合对象

1 个答案: