I don't understand what's going on

ponentDidMount() {
    console.log('ponentDidMount');
    //const self = this; 
    let _id = this.props.match.params.id.toUpperCase();

    if (_id != this.state.id.toUpperCase()) {

        axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
            .then(response => {
                // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
                this.setState({ id: _id }); //this == undefined
            });
    }
}

I can get a response back but this is always undefined and I'm unable to setState. I'm using an arrow function which I thought was scope 'this' to the ponent level. I can fix it by making a new var and setting 'this' before I make the request. I know that this should be working though. What am I missing?

My entire ponent

import React, { Component } from 'react';
import axios from '../../axios';


class CoinViewer extends Component {

state = {
    coin: {},
    hasLoaded: false,
    id: ''
}

ponentDidMount() {
    console.log('ponentDidMount');
    //const self = this; 
    let _id = this.props.match.params.id.toUpperCase();

    if (_id != this.state.id.toUpperCase()) {

        axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
            .then( resp => {
                // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
                this.setState({ id: _id });
            });
    }
}

ponentWillMount() {

}

ponentWillUpdate() {


}

ponentDidUpdate() {

}

getCompleteCoinData(_id) {

}


render() {


    return (
        <div>
            CoinViewer Component: {this.state.id} sads
        </div>
    )
}

}

export default CoinViewer

I don't understand what's going on

ponentDidMount() {
    console.log('ponentDidMount');
    //const self = this; 
    let _id = this.props.match.params.id.toUpperCase();

    if (_id != this.state.id.toUpperCase()) {

        axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
            .then(response => {
                // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
                this.setState({ id: _id }); //this == undefined
            });
    }
}

I can get a response back but this is always undefined and I'm unable to setState. I'm using an arrow function which I thought was scope 'this' to the ponent level. I can fix it by making a new var and setting 'this' before I make the request. I know that this should be working though. What am I missing?

My entire ponent

import React, { Component } from 'react';
import axios from '../../axios';


class CoinViewer extends Component {

state = {
    coin: {},
    hasLoaded: false,
    id: ''
}

ponentDidMount() {
    console.log('ponentDidMount');
    //const self = this; 
    let _id = this.props.match.params.id.toUpperCase();

    if (_id != this.state.id.toUpperCase()) {

        axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
            .then( resp => {
                // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
                this.setState({ id: _id });
            });
    }
}

ponentWillMount() {

}

ponentWillUpdate() {


}

ponentDidUpdate() {

}

getCompleteCoinData(_id) {

}


render() {


    return (
        <div>
            CoinViewer Component: {this.state.id} sads
        </div>
    )
}

}

export default CoinViewer

• javascript
• reactjs

• 1 I am using the same approach, but with fetch. It seems to be working !! – Ragul Parani Commented Jun 7, 2018 at 18:01
• 1 You should be able to use the arrow function to access the this context of your ponent. See here: stackoverflow./questions/41194866/… Could you share the code for your whole ponent? – SlimPDX Commented Jun 7, 2018 at 18:11
• 2 not able to reproduce your issue, I tried something similar to your code, but it worked for me. codepen.io/smilesaayush/pen/VdKoJa If I don't use arrow function after axios response then it gives error, but otherwise it works. – Ronn Wilder Commented Jun 7, 2018 at 18:22
• If I declare let self == this and then self.setState(...) it works. I never had to do that for any other axiom promises. It's a bit confusing for me – Kai CriticallyAcclaimed Cooper Commented Jun 7, 2018 at 18:47
• 1 maybe try logging what this is in every step to see if its what you expect. also verify you are able to use arrow functions in other places in your code so you know its not a transpiler error – John Ruddell Commented Jun 7, 2018 at 19:00

3 Answers 3

Solution 1: arrow functions..

requestSuccess = (resp) => {
  // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
  this.setState({ id: _id });
}

ponentDidMount() {
  console.log('ponentDidMount');
  //const self = this; 
  let _id = this.props.match.params.id.toUpperCase();
  if (_id != this.state.id.toUpperCase()) {
     axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
       .then(this.requestSuccess);
  }
}

Solution 2: binding

ponentDidMount() {
  console.log('ponentDidMount');
  //const self = this; 
  let _id = this.props.match.params.id.toUpperCase();
  if (_id != this.state.id.toUpperCase()) {
     axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
       .then((resp) => {
          // let _currentcoin = { ...resp.data.RAW.BTC.USD, ticker: _id };
          this.setState({ id: _id });
     }.bind(this));
  }
}

:Edit Wow, the below is kinda true, but the real issue is you didn't initialize state. https://reactjs/docs/react-ponent.html#constructor

constructor() {
  super();
  this.state = {
    coin: {},
    hasLoaded: false,
    id: ''
  }
}

You could use lexical scoping and fix like this, this is a popular pattern to protect this.

Basically, when you use promises or functions from other libraries/ APIs you do not know what they have set their context inside the callback functions to.

In order to use the context you want, you keep the context you need saved in a variable within scope and reference it there _this, rather than by pointing to the context this. I'd remend reading 'you dont know js' to understand this concept further.

ponentDidMount() {
  console.log('ponentDidMount');
  const _this = this; 
  let _id = _this.props.match.params.id.toUpperCase();

  if ( _id != _this.state.id.toUpperCase() ) {
    axios.get('/data/pricemultifull?fsyms=' + _id + '&tsyms=USD')
      .then(response => {
        _this.setState({ id: _id }); //this == undefined
      });
  }
}

When working with React.js, chances are you have faced a problem how to access this from inside the promise.There is more than one solution to resolve this reference inside the promise. The old approach would be setting the self = this reference While this would work, the remended solution, which is more inline with ES6, would be to use an arrow function here:

class Component extends React.Component { 
  ponentDidMount() {
    let ponent = this;
    axios.get('http://…').then(function(data) {
      ponent.setState( { name: data.blah } );
    });
  }
}

The arrow syntax, as stated above, is a much smarter way to allow use of this to make reference to React.Component classes, as we can see below:

class Component extends React.Component { 
  ponentDidMount() {
    axios.get('http://…').then(data => {
      this.setState( { name: data.blah } );
    });
  }
}

Please note, instead of using function(data) { //body }, we used data => { //body }, and in this case this reference won’t get the promise instance back.