陣營的setState混淆對象

Question

我的組件顯示與姓名/姓氏的/ 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}/> 
      ... 

個

形式的值已經與我的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改變編輯的狀態恢復到真正能再次見到了接觸，但我不明白爲什麼我仍然看到在這個視圖中對editContact所做的更改。我的handleChange只更新editedContact狀態，而不是聯繫狀態，爲什麼我通過控制檯日誌看到對聯繫狀態的更改？

Answer 1

我在想這是由於突變錯誤。這些線路具體爲：

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

你在做什麼是設置每個這兩個鍵來引用payload.result。意思是，如果你在哪裏改變​​那麼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) 
    }); 
} 

讓我們知道這是否正常工作！