试图在Reactjs中实现一个简单的promise

Question

这是我第一次尝试做出promise。我有一个工作的基本promise（从别人的代码中剽窃），但不知道如何调整它以使其有用。

到目前为止我所拥有的（在我的render（）函数中）

  var promise = new Promise( (resolve, reject) => {

     let name = 'Dave'

     if (name === 'Dave') {
        resolve("Promise resolved successfully");
     }
     else {
        reject(Error("Promise rejected"));
     }
  });

  promise.then(function(result) {
     console.log(result); // "Promise resolved successfully"
  }, err => {
     console.log(err); // Error: "Promise rejected"
  });

果然，由于promise条件匹配（name===“Dave”），我的控制台日志promise已成功解析。

然而，我不知道在使用promise时如何给变量赋值。例如：

  promise.then(function(result) {
     var newName = 'Bob'
  }, function(err) {
     var newName = 'Anonymous'
  });

然后，当我尝试返回这个值在渲染（）的返回语句，像这样：

<h2>{newName}</h2>

它说newName是未定义的。

我也尝试过：

  promise.then(function(result) {
     var newName = result
  }, function(err) {
     var newName = error
  });

…预期这会将resolve或error字符串分配到newName变量中，但不是。

我是不是想错了？当我的条件满足时，如何使它比只记录字符串更有用？

任何帮助都将不胜感激，因为这真的让我头疼。。。

 render() {

      var promise = new Promise( (resolve, reject) => {

         let name = 'Paul'

         if (name === 'Paul') {
            resolve("Promise resolved successfully");
         }
         else {
            reject(Error("Promise rejected"));
         }
      });

      let obj = {newName: ''};

      promise.then( result => {
         obj["newName"] = result
      }, function(error) {
         obj["newName"] = error
      });

      console.log(obj.newName)

    return (
      <div className="App">
         <h1>Hello World</h1>
         <h2>{obj.newName}</h2>
      </div>
    );
  }




Answer 1

匿名用户

你需要考虑你所处的范围。当你在传递给promise的函数中时，，你在一个新的块作用域中，因此你在函数中创建的任何变量都不会存在于它的作用域之外。我不确定如何定义React组件，但假设组件上有一个newName变量，有两种方法可以解决范围问题—绑定和箭头函数：

promise.then(function(result) {
  this.newName = result; //or what you want to assign it to
}.bind(this))

然后您可以使用{this.newName}

或具有箭头功能：

promise.then((result) => {
  this.newName = result; //or what you want to assign it to
}.bind(this))

我建议您观看此egghead视频，以帮助您理解javascript中的this关键字。

Answer 2

您正在以错误的方式使用React。一个Promise被设计为在稍后的时间点返回结果。当您的promise得到解决或拒绝时，您的呈现将已完成执行，并且在promise完成时不会更新。

render方法应仅依赖props和/或state来呈现所需的输出。对prop或状态的任何更改都将重新呈现组件。

>

首先，确定您的Promise在组件的生命周期中应该去哪里（这里）

在你的情况下，我会做以下事情

>

初始化构造函数（ES6）内部的状态，或者通过get初始状态

constructor(props) {
  super(props);
  this.state = {
    name: '',
  };
}

然后在componentWillMount或componentDidMount上，如果您觉得合适，请在那里调用promise

componentWillMount() {
 var promise = new Promise( (resolve, reject) => {

  let name = 'Paul'

  if (name === 'Paul') {
   resolve("Promise resolved successfully");
  }
  else {
   reject(Error("Promise rejected"));
  }
 });

 let obj = {newName: ''};

 promise.then( result => {
  this.setState({name: result});
 }, function(error) {
  this.setState({name: error});
 });
}

然后在render方法中编写类似的代码。

render() {
 return (
  <div className="App">
   <h1>Hello World</h1>
   <h2>{this.state.name}</h2>
  </div>
 );
}