CODEWITHSUNDEEP
javascriptreactjsconstructorfetch-api
joshlevy89
joshlevy89

Reputation: 269

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
       //})
    })
  }
...

Upvotes: 2

Views: 390

Answers (1)

Andy Noelker
Andy Noelker

Reputation: 11269

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
           //})
        })
    }
    ...

Upvotes: 3

Related Questions