Cannot access state inside fetch in React Native - reactjs

Question

In React Native, I have the following:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import Immutable from 'immutable';
const styles = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: '20%',
},
});
export default class VirtualFenceBottom extends Component {
constructor(props) {
super(props);
this.state = { markers: this.props.markers };
}
populateMarkers = () => {
let markersVar = this.state.markers;
fetch('http://localhost:8080/virtualFence', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}}).then(function(response){
console.log('GET markers success');
// Parse it as JSON
parsedResponse = JSON.parse(response["_bodyInit"]);
console.log('response after JSON.parse: ',parsedResponse);
if (parsedResponse.length > 0) {
//update state here
console.log('parsedResponse in if statement: ',parsedResponse);
// this.setState({markers: parsedResponse});
} else {
console.log('There were no markers in db');
}
console.log('markersVar: ',markersVar);
// console.log('this.state.markers after setState: ',this.state.markers);
}).catch(function(error) {
console.log('GET markers error');
console.log("GET markers error: ",error);
});
};
render() {
return (
<View>
<TouchableHighlight onPress={this.populateMarkers}>
<Text style={styles.text}>Populate markers from DB</Text>
</TouchableHighlight>
</View>
);
}}
All goes as expected, except I cannot access state directly inside fetch. Strangely, I can access it inside the containing function with markerVar. It seems there is a particular issue with fetch itself.
My goal is to update the state with the response. None of the existing answers for similar questions seem to work in my case. What do I do?
UPDATE 1: Added the code for the entire component.
UPDATE 2: Fixed a misspelling of the parsedResponse variable that was causing one part of the error.

Answer 1

The callbacks that are called in response to fetch results are just unbuond functions.
Try this:
}}).then(function(response){
console.log('this', this); // see that 'this' is not
// what you expect it to be
Note, that function() { ...} in javascript creates closure that captures all local variables (including your marketsVar, but not _this__.
So, 'this' points into 'window' variable which doesn't have state (usually).
To fix this issue, you can
1) use fat arrow functions then and in catch handlers:(we're in 2018!, your toolchain handles it for sure):
fetch(...)
.then(() => {
this.setState(...) // this is defined. magic!
2) create alias to this - that is used sometimes:
var that = this;
fetch(...)
.then(function() {
that.setState(...); // that is defined in same way as marketsVar
})
3) bind your handlers manually but that's ugly as hell so i don't recommend it.

Answer 2

Be sure that this function exists inside of the component, otherwise it will not have access to the lexically scoped this.state method.
class MyComp extends React.Component {
state = { val: 0 }
myMethod = () => {
this.setState({ val: 2 })
}
}
Also consider whenever you pluck values from state, keeping the names consistent. For example:
const { markers } = this.state