CODEWITHSUNDEEP
javascriptreactjspromise
Eliâ Melfior
Eliâ Melfior

Reputation: 369

Return values from promise(then)

i'm having difficulties in returning some values from a promise.

This is my code:

getInitialState: function() {
 var me = this;
 var promise = me.getChosenProtocols();

 return (promise.then(function(value) {
   var ChosenProtocols = Object.keys(value).map(key => value[key]);
   return ({
     showModal: (ChosenProtocols.length == 0) ? true : false,
     SelectedProtocols: ChosenProtocols,
     nmTitle: SE.t(218997)
   });
   }, function (value) {
     return({
     showModal: true,
     SelectedProtocols: [],
     nmTitle: SE.t(218997)
   });
 }));
},

So what is happening, getChosenProtocols returns a resolved promise, and i am trying to return values from it.
Any help would be appreciated.

Thanks everyone, it worked when i changed it to be like this: 

getInitialState: function() {
    var me = this;

    return ({
            showModal: false,
            SelectedProtocols: [],
            nmTitle: SE.t(218997)
    });
},

componentWillMount: function() {
    var me = this; 
    var promise = me.getChosenProtocols();

    promise.then(function(value) {
        var selectedProtocols = Object.keys(value).map(key => value[key]);

        me.setState({
            showModal: (selectedProtocols.length == 0 ) ? true : false,
            SelectedProtocols: selectedProtocols
        })
    });
},

Upvotes: 0

Views: 3436

Answers (2)

bzekiunat
bzekiunat

Reputation: 69

You shouldn't do async operations in getInitialState, you can setState in componentWillMount or componentDidMount. Apart from this, I strongly recommend using ES6 classes. 

getInitialState: function() {
  return {chosenProtocols: {}};
},
componentDidMount: function() {
  var protocolsPromise = this.getChosenProtocols();
  protocolsPromise.then((value) => {
    var chosenProtocols = Object.keys(value).map(key => value[key]);
    this.setState({chosenProtocols: chosenProtocols});
  })
}

ES6 version

class ComponentName extends React.Component {
  constructor(props) {
    super(props);
    this.getChosenProtocols = this.getChosenProtocols(bind);
    this.state = {chosenProtocols: {}};
  }


  componentWillUnmount() {
    var protocolsPromise = this.getChosenProtocols();
    protocolsPromise.then((value) => {
      var chosenProtocols = Object.keys(value).map(key => value[key]);
      this.setState({chosenProtocols: chosenProtocols});
    });
  }

  getChosenProtocols() {
    // Returns a promise
  }
}

Upvotes: 2

Brett DeWoody
Brett DeWoody

Reputation: 62773

What you have regarding the promise looks mostly correct. The issue appears to be where you want to return the values of the promise to. It looks like you want to set an initial value in a React component based on the promise. If that's the case, create a function to return the value from the promise, then set a variable equal to the output of that function. That said, doing this within setInitialState isn't the recommended place. componentWillMount or componentDidMount would be more appropriate.

If me.getChosenProtocals is returning a resolved promise, the first function you provide to then() will have the returned value from the promise passed to it as the variable value.

Something along these lines: 

getInitialState: function() {
  return(
    SelectedProtocols: null
  )
}

componentWillMount: function() {
  const me = this; 

  me.getChosenProtocols = new Promise((resolve, reject) => {
    setTimeout(function(){
      resolve("Success!");
    }, 250);
  });

  me.getChosenProtocols.then(function(value) {
    var selectedProtocols = Object.keys(value).map(key => value[key]);
    me.setState({
      SelectedProtocols: selectedProtocols
    })
  })
}

Upvotes: 1

Related Questions