javascript - 如何在 reactJS 中显示 "update"状态？

<分区>

我有这个

— 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。为什么？

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

请问如何解决这个问题？

谢谢

最佳答案

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 方法。

关于javascript - 如何在 reactJS 中显示 "update"状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42459276/

上一篇：javascript - 如何使用 tbody 作为根 react 元素

下一篇：javascript - 有 Elixir 的 typescript 吗？

相关文章：

javascript - React - 有人可以做到这一点吗？

javascript - localStorage.removeItem 基于值

javascript - 获取具有相同值的键集

javascript - 未捕获的不变违规 : addComponentAsRefTo(. ..):只有 ReactOwner 才能拥有引用

javascript - 使用循环构建对象数组

javascript - 防止在键盘 Tab 键时滚动

ruby - 编码和解码 ruby 符号

javascript - 如何在 Meteor React js 中使用 alanning 角色？

javascript - 如何从提交表单中获取输入值并存储在 redux 存储变量中？

asp.net - 为什么 document.getElementById ('hyperlink_element_id' ) 返回超链接的 href 属性的值？