在带有对象的reactJs中使用setState始终为空

Question

I have this snippet that doesn't seem to be work and it is driving me insane! Can someone please point out what I have done wrong ?

getInitialState: function () {
    return {
        modalUser: {},
        users: []
    };
},
updateModalUser: function (user) {
    console.log(user);
    module.React.addons.update(this.state, {
        modalUser: { $set: user }
    });
    console.log(this.state);
},

I did try doing this originally without the addons, but I had the same result. ie my updateModalUser looked like:

updateModalUser: function (user) {
    console.log(user);
    this.setState({
        modalUser: user
    });
    console.log(this.state);
},

This output I get either way is:

Object {id: 28, fname:"fred", lname:"flinstone"…}

Object {modalUser: {}, users: []}

Answer 1

this.setState() is async, you need to log the state in it's callback:

updateModalUser: function (user) {
    console.log(user);
    this.setState({
        modalUser: user
    }, function() {
        console.log(this.state);
    })
}

More info here: https://facebook.github.io/react/docs/component-api.html#setstate

Answer 2

您应该使用this.setState({modalUser: newObjectHere}) ，这是更改组件状态的正确方法。