Updating state after api call success

Question

It took two days of reading and researching about what could possibly cause a problem, but I just don't understand.

I have two API's: one from NASA with position of sattelite, and another for a map layer from GIS software. I try to update the map coordinates by fetching current coordinates of sattelite position in space. This will fire every 1 second and it will update the position of the map from the coordinates of the sattelite. However, the state just doesn't update.

Here is the code:

let url = 'http://api.open-notify.org/iss-now.json';

class Basemap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            center: [31, 13]
        };
    }
    componentDidMount() {
        this.getCenter();
        this.interval = setInterval(this.getCenter, 2000);
    }
    getCenter() {
        fetch(url)
                .then(d => d.json())
                .then(d => (d) => {
                    this.setState({
                      center: [d.iss_position.latitude, + ', ' + 
                               d.iss_position.longitude]
                    });
                });
    }
    render() {
        return (
            <Map style={{ width: '100vw', height: '100vh' }} 
                    mapProperties={{ basemap: 'satellite' }} 
                    viewProperties= { this.state } />
        );
    }
}

export default Basemap;

I succesfully retrieve the updated coords of the sattelite every second by refiring the fetch function, however the state of the map doesn't change.

What am I possibly missing?!

The GIS Api uses the following for positioning the map: `center: [25, 78]`. Numbers are coordinates. — , Aug 31 '17 at 22:16
Yeah but it's an array so why do you need to do the `+ ', ' +` Just `center: [d.iss_position.latitude, d.iss_position.longitude]` — patrick, Aug 31 '17 at 22:21

Mayank Shukla · Accepted Answer · 2017-08-31T22:29:05.743

4

Because inside second .then you are returning another arrow function instead of executing the setState. That function doesn't get called and that's why state is not getting updated.

Write it like this remove the another arrow function:

fetch(url)
    .then(d => d.json())
    .then(d => {
        this.setState({
            center: [....]
        });
    });   
}

Another issue is getCenter is loosing the context when you passing it as a callback method to setInterval, so bind the method inside constructor:

this.getCenter = this.getCenter.bind(this);

Check the details about this syntax: () => () =>

What do multiple arrow functions mean in javascript?

edited Aug 31 '17 at 22:29

answered Aug 31 '17 at 22:21

Mayank Shukla

100,735
18
158
142

1

Sorry, that was because I experimented with the console a bit. However, now I get this `Unhandled Rejection (TypeError): _this2.setState is not a function`. It is so frustrating! Btw. love to you guys for giving tips so fast! – Aug 31 '17 at 22:25
2

you are getting the error because you forgot to bind `getCenter` function put this line in constructor: `this.getCenter = this.getCenter.bind(this)` it will work :) – Mayank Shukla Aug 31 '17 at 22:26
1

Yes, that solved the error! Now there is no error, but still state is not updated... I guess it will be a sleepless night. – Aug 31 '17 at 22:30
1

use setState callback to check whether state is getting updated or not, like this: `this.setState({ center: [....] }, () => { console.log(this.state.center); });` check the value and let me know the result. – Mayank Shukla Aug 31 '17 at 22:33
1

Mayank, thanks for helping. Yes, the state is updated every time interval as needed. I also used `parseInt` on the string coords just to see if that would solve the problem. But no.. So, the problem is outside of this component I guess. – Aug 31 '17 at 22:37
2

not sure about co-ordinates, state is getting the updated data now you need to do research about format and how to show the updated co-ordinates :) – Mayank Shukla Aug 31 '17 at 22:40
1

Thanks for the patience. I will accept this answer because it solved the state update as asked. – Aug 31 '17 at 22:41

Updating state after api call success

1 Answers1