从promise(然后)返回值

时间:2017-05-29 13:02:15

标签: javascript reactjs promise

我很难从承诺中返回一些值。

这是我的代码:

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)
   });
 }));
},

所以发生了什么,getChosenProtocols返回一个已解决的promise,我正在尝试从中返回值。
任何帮助,将不胜感激。

谢谢大家,当我把它变成这样的时候它起作用了:

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
        })
    });
},

2 个答案:

答案 0 :(得分:1)

您不应该在getInitialState中执行异步操作,您可以在componentWillMount或componentDidMount中执行setState。除此之外,我强烈建议使用ES6课程。

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版

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
  }
}

答案 1 :(得分:0)

你对这个承诺的看法大多是正确的。问题似乎是您要将promise的值返回到的位置。看起来您希望根据promise在React组件中设置初始值。如果是这种情况,请创建一个函数以从promise返回值,然后设置一个等于该函数输出的变量。也就是说,在setInitialState内执行此操作不是推荐的地方。 componentWillMountcomponentDidMount会更合适。

如果me.getChosenProtocals返回已解决的承诺,则您向then()提供的第一个函数将从作为变量value传递给它的承诺返回值。

这些方面的东西:

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
    })
  })
}