I have the following code in component:
constructor() {
this.state = Immutable.fromJS({
user : {
wasChanged : false,
firstName : false,
lastName : false,
address : {
street : false,
}
}
});
}
onEdit({target: {dataset: {target}}}, value) {
this.setState(function (prevState) {
return prevState.setIn(['user', target], value);
});
}
render() {
var user = this.state.get('user').toJS();
...
}
The problem is that when I try to update the value in onEdit I see that prevState has different prototype set. I don't understand why or what am I doing wrong. I see this in console
> Object.getPrototypeOf(this.state)
src_Map__Map {@@__IMMUTABLE_MAP__@@: true}
> Object.getPrototypeOf(prevState)
Object {}
After the state has been changed it goes to render where it of course can't find get function or anything from Immutable
Using react with addons 0.13.3.
Put it as a key on state.
this.state = {
data: Immutable...
};
Currently the reason you can't use an Immutable object as state is the same reason you can't do this.state = 7
: it's not a plain JavaScript object.
Roughly the operation looks like this:
React.Component.prototype.setState = (changes) => {
batchUpdate(() => {
// copies own properties from state to the new object
// and then own properties from changes to the new object
var nextState = Object.assign({}, state, changes);
this.componentWillUpdate(...);
this.state = nextState;
queueDomUpdateStuff(this.render(), () => this.componentDidUpdate());
});
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With