1

I have this

— Ajax Callback :

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

— And handleChange on my inputs :

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

Give this :

 console.log(this.state.user);

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

Instead this : console.log(this.state.user);

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

When handleChange is fired, this.state.user deletes id_user and action key. So this.state.user leaves only firstname_user and lastname_user. Why?

I didn't delete any keys so I don't understand why.

How to fix this please?

Thanks

2
  • 1
    @AndrewLi is right. setState sets the state of the object, not updates it. I think you can take a look at this duplicate as well. stackoverflow.com/a/25713365/763909
    – newpatriks
    Feb 25, 2017 at 17:38
  • @newpatriks Yes, that's a way better duplicate target.
    – Andrew Li
    Feb 25, 2017 at 17:39

1 Answer 1

4

setState(nextStateObject) performs shallow merge of nextStateObject into current state so nested objects (like state.user in your case) are not extended but overridden. You can use Object.assign to solve your problem:

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

Please check React docs of setState method.

Not the answer you're looking for? Browse other questions tagged or ask your own question.