Axios fetch in react

Question

I need some assistent in using Axios in my react app. I use it in combination with geolocation to get the users location and use it in the api call with Axios.

My code is:

componentDidMount() {
 if (navigator.geolocation){

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    var th = this;
    this.serverRequest =
      axios.get(`https://api.darksky.net/forecast/APIKEY/`+latitude+`,`+longitude+`?units=auto`)
        .then(result => {
          th.setState({
            daily: result.data.daily.data,
            loading: false,
            error: null
          });
        })
      .catch(err => {
        // Something went wrong. Save the error in state and re-render.
        this.setState({
          loading: false,
          error: err
        });
      });
  };
  function error() {
    console.log( 'geolocation error' )
  };
  navigator.geolocation.getCurrentPosition(success, error);
 }
}

but i end up with the error Uncaught TypeError: Cannot set property 'serverRequest' of undefined

Joe Attardi · Accepted Answer · 2016-11-14 21:36:36Z

7

When success is called as a callback, its this value won't be right - in your case it's undefined. You can fix this by using bind on your callback function:

navigator.geolocation.getCurrentPosition(success.bind(this), error);

answered Nov 14, 2016 at 21:36

Joe Attardi

4,5613 gold badges41 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frisk0 Over a year ago

You've made my day. Thanks!

Collectives™ on Stack Overflow

Axios fetch in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related