joshlevy89 joshlevy89 - 7 months ago 18
Javascript Question

Get a constructor variable in promise

I can't get a constructor variable within my fetch call using javascript and react. I would like the value of this.state.numXLabels within the .then(function(json) callback, but I get TypeError: Cannot read property 'state' of undefined(…). What is the proper way of doing this? Here is the relevant code:

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

import React, { Component } from 'react'
class StockGraph extends Component {

constructor(props) {
super(props);
this.state = { numXLabels: 0 }
var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+
'.json?api_key=bCRpjzvgPNkxLzqAv2yY';
fetch(url)
.then(function(response) {
return response.json()
})
.then(function(json) {
console.log(this.state.numXLabels);
//this.setState({
// numXLabels: 30
//})
})
}
...

Answer

Do not try to use state or make ajax calls in the constructor of your React component. Instead, put that call inside one of the lifecycle methods that fires immediately, like componentWillMount. Also to access this.state inside of your ajax callback, you will need to bind this to the function. Using the fat arrow function syntax is the most straightforward way.

class StockGraph extends Component {
    constructor(props) {
        super(props);
        this.state = { numXLabels: 0 }
    }

    componentWillMount() {
        var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+
           '.json?api_key=bCRpjzvgPNkxLzqAv2yY';
        fetch(url)
        .then((response) => {
           return response.json()
         })
        .then((json) => {
            console.log(this.state.numXLabels);
            //this.setState({
             // numXLabels: 30
           //})
        })
    }
    ...
Comments