如何在reactJS中「更新」狀態？

- Ajax回調：

 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" 
       }, 
      }); 
     }

- 而handleChange我輸入：

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

給這個：

console.log(this.state.user); 

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

而是這樣的：控制檯。日誌（this.state.user）;

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

當handleChange被激發，this.state.user刪除id_user和action關鍵。所以this.state.user只剩下firstname_user和lastname_user。爲什麼？

我沒有刪除任何鍵，所以我不明白爲什麼。

如何解決此問題？

感謝

來源

2017-02-25 Steffi

@AndrewLi是對的。 setState設置對象的狀態，而不是更新它。我想你也可以看看這個重複。 http://stackoverflow.com/a/25713365/763909 – newpatriks

@newpatriks是的，這是一個更好的重複目標。 – Li357

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。

來源

2017-02-25 17:50:28

如何在reactJS中「更新」狀態？

回答

相關問題