如何在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中“更新”状态？

回答

相关问题