How do I setState for nested object?
·
Answer a question
For a plugin I'm using I have to have a state that looks like this:
getInitialState() {
return {
invalid: true,
access: {
access_code: '',
zipcode: '',
password: '',
confirm: '',
hospital_id: '',
},
}
},
How would I set the state of hospital_id without setting the rest of access?
This seems to remove everything but hospital_id:
this.setState({access: {hospital_id: 1}})
Answers
You have a few options:
-
With ECMA6, you can use the Object spread proposal (
...) to create copies of objects with updated properties.this.setState({ access: { ...this.state.access, hospital_id: 1, }, }); -
You can use the native assign function on the Object (
Object.assign())this.setState({ access: Object.assign({}, this.state.access, { hospital_id: 1, }), }); -
Or for the shortest version and atomic update:
this.setState(({access}) => ({access: { ...access, hospital_id: 1, }}); -
And one more option is the updates addon:
var update = require('react-addons-update'); // per React docs // https://reactjs.org/docs/update.html // , you may want to change this to // import update from 'immutability-helper'; this.setState({ access: update(this.state.access, { hospital_id: {$set: 1}, }) });
I would recommend using the first one.
更多推荐
所有评论(0)