reactJSの状態を「更新する」方法は？

Question

私はこの

持っている - Ajaxのコールバック： - 私の入力にそしてhandleChange

 success:function(data) { 
      self.setState({ 
       user: { 
        id_user: data.session.id_user, 
        firstname_user: data.session.firstname_user, 
        lastname_user: data.session.lastname_user, 
        action: "updateUser" 
       }, 
      }); 
     } 

を：代わりにこの

console.log(this.state.user); 

/* 
    user 
     firstname_user: "Blablabla" 
     lastname_user: "Blablabla" 
*/ 

： コンソールを

handleChange(){ 
    this.setState({ 
     user: { 
      firstname_user: this.firstname_user.refs.input.value, 
      lastname_user: this.lastname_user.refs.input.value 
     } 
    }); 
} 

はこれを与えます。ログ（this.state.user）; handleChangeが発射された場合

/* 
    user 
     id_user: XX 
     firstname_user: "Blablabla" 
     lastname_user: "Blablabla" 
     action: "updateUser" 
*/ 

、this.state.userはid_userとactionキーを削除します。従ってthis.state.userは、唯一のfirstname_userとlastname_userの葉になります。どうして？

私はキーを削除しなかったので、私はその理由を理解していません。

これを修正するにはどうすればよいですか？

おかげ

Answer 1

setState(nextStateObject)（あなたのケースでstate.userなど）ので、ネストされたオブジェクトが拡張が、オーバーライドされていない現在の状態にnextStateObjectの浅いマージを行います。あなたはあなたの問題を解決するためにObject.assignを使用することができます。

handleChange(){ 
    let updatedUser = Object.assign({}, this.state.user, { 
      firstname_user: this.firstname_user.refs.input.value, 
      lastname_user: this.lastname_user.refs.input.value 
     }); 
    this.setState({ 
     user: updatedUser 
    }); 
} 

setState方法のdocsを反応させるのを確認してください。