React.js, setting state in callback func

Question

I am making currency converter with react. I added swap button, which task is to change currency users want to sell with the one they want buy. So I have to change rates whenever its done here is function responsible for that:

getRates(currencyShortcut){
    fetch('https://api.fixer.io/latest?base='+currencyShortcut)
      .then(response => response.json())
      .then(parsedJson => this.setState({currencyRates:parsedJson}))
      .catch(error => console.log('fetch error - ', error))
  }

and swap function looks like that:

swapValues(e){
    e.preventDefault();
    const {currency1,currency2} = this.state;
    this.getRates(currency2.shortcut,()=>{
      this.setState({
        currency1: currency2,
        currency2:currency1
      })
    });
  }

but despite getRates is executed, the callback where I set state isn't. I seen When to use React setState callback, I want to do the same but another way around.

Tirth Shah · Accepted Answer · 2018-02-02 14:15:33Z

2

You need to accept the callback argument in getRates and the call it after the setState.

getRates(currencyShortcut, callBack){
    fetch('https://api.fixer.io/latest?base='+currencyShortcut)
      .then(response => response.json())
      .then(parsedJson => this.setState({currencyRates:parsedJson},
          ()=>callBack()))
      .catch(error => console.log('fetch error - ', error))
  }

answered Feb 2, 2018 at 14:15

Tirth Shah

6244 silver badges7 bronze badges

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

Comments

Aaditya Thakkar · Accepted Answer · 2018-02-02 14:18:45Z

2

You should return from getRates() call and it will get you the promise returned, and afterwards you can fire a callback with .then() in swapValues() function.

getRates(currencyShortcut){
    return fetch('https://api.fixer.io/latest?base='+currencyShortcut)
      .then(response => response.json())
      .then(parsedJson => this.setState({currencyRates:parsedJson}))
      .catch(error => console.log('fetch error - ', error))
  }

swapValues(e){
    e.preventDefault();
    const {currency1,currency2} = this.state;
    this.getRates(currency2.shortcut).then(()=>{
      this.setState({
        currency1: currency2,
        currency2:currency1
      })
    });
  }

This approach should work.

answered Feb 2, 2018 at 14:18

Aaditya Thakkar

1,81015 silver badges14 bronze badges

2 Comments

Jake11 Over a year ago

I tried it and got an error "this.getRates(...) is undefined" do you have idea where it could came from ?

Aaditya Thakkar Over a year ago

You might not have bind the this context for getRates() function. Check that

Miguel Calderón · Accepted Answer · 2018-02-02 14:19:55Z

1

You're calling getRates with two arguments, while the function is only taking the first one. If you accept a second cb argument in getRates, you could then call it from setState({...}, cb()) and get your callback executed.

answered Feb 2, 2018 at 14:19

Miguel Calderón

3,1011 gold badge20 silver badges19 bronze badges

Collectives™ on Stack Overflow

React.js, setting state in callback func

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related