Having strange errors using setState(), I always get nothing set to state:

Error code:

TypeError: Cannot read property 'setState' of undefined(…)

class HelloWorld extends React.Component {
constructor() {
    super();
    this.state = {listings:[]};
};

ponentDidMount (){
    fetch('./javascripts/data.json').then(function(response) {
        return response.json()
    }).then(function(json) {
       console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    }).catch((error) => {
        console.log(error);
    })
}
render () {
    return (
        <ListingUser userData={this.state.listings} />
    );
}
}

    ReactDOM.render(
        <HelloWorld />,
        document.getElementById('example')
    );

Having strange errors using setState(), I always get nothing set to state:

Error code:

TypeError: Cannot read property 'setState' of undefined(…)

class HelloWorld extends React.Component {
constructor() {
    super();
    this.state = {listings:[]};
};

ponentDidMount (){
    fetch('./javascripts/data.json').then(function(response) {
        return response.json()
    }).then(function(json) {
       console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    }).catch((error) => {
        console.log(error);
    })
}
render () {
    return (
        <ListingUser userData={this.state.listings} />
    );
}
}

    ReactDOM.render(
        <HelloWorld />,
        document.getElementById('example')
    );

• javascript
• reactjs
• ecmascript-6

2 Answers 2

The reason you're getting this error is because this doesn't refer to your ponent class inside of a promise. In order to use this.setState(), you'll need to bind the correct context of this.

fetch('./javascripts/data.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    }.bind(this))
    .catch((error) => {
        console.log(error);
    });

You can also use an arrow function, which will lexically bind the correct value of this.

fetch('./javascripts/data.json')
    .then(response => {
        return response.json();
    })
    .then(json => {
        console.log('parsed json ', json.listings);
        this.setState({listings: 'test string'});
    })
    .catch(error => {
        console.log(error);
    });

Inside of your .then() you are using the this keyword, and that's basically referring inside itself. To overe this you have to use arrow function which will refer the value of this globally.

Using Normal Function

.then(function(response) {
   return response
   this.setState({listings: 'test string'}); // which will refer inside of this function
})

Using Arrow Function

.then((response) => {
   return response
   this.setState({listings: 'test string'}); // which will refer outside/global
})