I could display API data in my console.log, but I can't setState with it . . . how can I setState? (fetch, React Native)

Question

constructor(props){
    super(props);
    if(myCounter.intCoin == 0){
        this.fetchCoinsAPI("litecoin", "usd");
        this.coinMet("ltc");
    }
    this.state = {
        X: new Animated.Value(0),
        data: undefined,
        arrayLength: undefined,
        line: undefined,
        dataReverse: undefined,
        properties: undefined,
        lineLength: undefined,
        color: "#CDCDCD",
        translate: new Animated.Value(-500), 
        coinColor: {
            btc: {color:"#31055A", selected:false},  
            eth: {color:"#31055A", selected:false}, 
            ltc: {color:"#31055A", selected:false},  
        },
        amountCombined: "USD 0.00",
        currency: "USD ",
        mainCurrency:"usd"
    };
    console.log(this.state.data);
}
fetchCoinsAPI(coinID, currency){
    return fetch(`https://api.coingecko.com/api/v3/coins/${coinID}/market_chart?vs_currency=${currency}&days=7`, {
        method: 'GET'
    })
    .then(res => res.json())
    .then(resp => this.setState({data: resp.prices}))
    .catch(err => {console.log(err)});
}

**I'm fetching data from a remote API for charting **
It returns undefined for the state data, but when I console.log(resp.prices) in .then() it works. I'm stumped, can someone point out what I'm missing?

Thanks, jedBoy.

This happens due to asynchronous behavior, so you have to wait for the data to load in state. i.e use like this if you printing something: `{this.state.data && this.state.data.map.....}` — bakar_dev, Jul 30 '20 at 07:16

Adam Azad · Accepted Answer · 2020-07-30T09:57:45.053

There are three observations I would like to share.

Bind methods

fetchCoinsAPI uses Component.setState, so bind the context of fetchCoinsAPI to the component in the constructor

constructor(props){

    this.fetchCoinsAPI = this.fetchCoinsAPI.bind(this);

}

Do not call external sources in the constructor

Put them in componentDidMount

componentDidMount {
    this.fetchCoinsAPI("litecoin", "USD");
}

JavaScript is asynchronous

The data will not be available due to the asynchronous behavior of JavaScript. Read How do I return the response from an asynchronous call?

score 1 · Answer 2 · answered Jul 30 '20 at 07:20

Convert it into an arrow function. like this

const fetchCoinsAPI = (coinID, currency) => {
    return fetch(`https://api.coingecko.com/api/v3/coins/${coinID}/market_chart?vs_currency=${currency}&days=7`, {
        method: 'GET'
    })
    .then(res => res.json())
    .then(resp => this.setState({data: resp.prices}))
    .catch(err => {console.log(err)});
}

Since you are setting the state on an async call, you can write the state-dependent code after the state is updated

...
this.setState({data: resp.prices},() => {
    // code after state is set
})
...

I could display API data in my console.log, but I can't setState with it . . . how can I setState? (fetch, React Native)

2 Answers2

Bind methods

Do not call external sources in the constructor

JavaScript is asynchronous