如何在 reactJS 中“更新”状态？ [复制]答案

【问题标题】：How to "update" state in reactJS? [duplicate]如何在 reactJS 中“更新”状态？ [复制]
【发布时间】：2017-07-16 12:05:15
【问题描述】：

我有这个

——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"
 */

取而代之的是： console.log(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。为什么？

我没有删除任何键，所以我不明白为什么。

请问如何解决？

谢谢

【问题讨论】：

@AndrewLi 是对的。 setState 设置对象的状态，而不是更新它。我想你也可以看看这个副本。 stackoverflow.com/a/25713365/763909
@newpatriks 是的，这是一种更好的复制目标。

标签： javascript json reactjs react-jsx

【解决方案1】：

setState(nextStateObject) 将nextStateObject 浅合并到当前状态，因此嵌套对象（如您的情况下的state.user）不会被扩展而是被覆盖。你可以使用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
    });
}

请检查 React docs 的 setState 方法。

【讨论】：