CODEWITHSUNDEEP
node.jsreact-native
zoecarver
zoecarver

Reputation: 6403

State not being set properly - React Native

I am very confused by what I am getting from my code. I have the following which should log out data.points then set this.state.points to data.points and then log out this.state.points, however when it logs them out they are not equal. This is the exact code I am using, so I am sure it is what was outputted. I am probably overlooking something, but I have spent the past hour reading over and logging out this code, and I still cannot figure it out. Here is the code that I run:

console.log(data.points);

if (!this.state.hasPressed) {
    this.setState({points: data.points})
    console.log('in not hasPressed if');
}

console.log(this.state.points);

However in the chrome remote debugger I get this:

["114556548393525038426"]

in not hasPressed if

[]

Upvotes: 1

Views: 90

Answers (1)

Val
Val

Reputation: 22797

setState is an asynchronous call. you have to use function callback to wait for setState complete.

console.log(data.points);

if (!this.state.hasPressed) {
    this.setState({points: data.points}, () => {
        console.log(this.state.points);
    });
    console.log('in not hasPressed if');
}

refer to react-native setState() API:

setState(updater, [callback])

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

Upvotes: 2

Related Questions