I have been using React state to maintain some data. For ints and strings it's working well, but unfortunately arrays are not working.
In my ponent constructor, I have
constructor(props) {
super(props);
this.state = {
terms: 5,
myArray: []
}
and then, I am trying to maintain it in ponentDidUpdate
ponentDidUpdate() {
this.state = {
terms: this.state.terms,
myArray: this.state.myArray
}
but myArray: this.state.myArray
is not working. However terms: this.state.terms
is working perfectly.
Can someone help!
I have been using React state to maintain some data. For ints and strings it's working well, but unfortunately arrays are not working.
In my ponent constructor, I have
constructor(props) {
super(props);
this.state = {
terms: 5,
myArray: []
}
and then, I am trying to maintain it in ponentDidUpdate
ponentDidUpdate() {
this.state = {
terms: this.state.terms,
myArray: this.state.myArray
}
but myArray: this.state.myArray
is not working. However terms: this.state.terms
is working perfectly.
Can someone help!
Share Improve this question edited Mar 31, 2017 at 17:42 nbkhope 7,4744 gold badges43 silver badges59 bronze badges asked Mar 31, 2017 at 14:13 h_hh_h 1,2314 gold badges28 silver badges47 bronze badges 4- 1 why do you want to setState in ponentDidUpdate method ?? and one more thing what do you mean by not working, r u trying to update the array ? – Mayank Shukla Commented Mar 31, 2017 at 14:17
- and also you should use this.setState() to update state – dynamo Commented Mar 31, 2017 at 14:18
- After rendering ponents, I have to change other state values. – h_h Commented Mar 31, 2017 at 14:19
- @ Mayank Shukla Actually, I am re initialising state due to some reason, Anyhow never mind. I resolved my problem. But thank you for your timely reply. I really appreciate. – h_h Commented Mar 31, 2017 at 16:03
3 Answers
Reset to default 4Issue is you are updating the state
value in a wrong way, Update the state value like this:
this.setState({
terms: this.state.terms,
myArray : this.state.myArray
});
As per DOC:
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
Update the state array
like this, first create a copy of that by using slice()
, then do the change and use setState
to update:
let arr = this.state.myarr.slice();
arr.push('data');
this.setState({arr});
You cannot set state directly like that since its an array you will have to append the value or else push the value.
try something like
var newArray = this.state.myArray.slice();
newArray.push("new value");
this.setState({myArray:newArray})
here i sliced to make it immutable.
You cannot use this.state
with purpose to update state, you have to use:
this.setState(newStateObject);