尝试在Reactjs中实现SIMPLE Promise

小编典典

尝试在Reactjs中实现SIMPLE Promise

reactjs

在React中第一次尝试Promises。我有一个基本的承诺可以工作（从别人的代码中窃取），但是不知道如何使它有用。

到目前为止我所拥有的（在我的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 resolved successfully。

但是，我不知道在使用Promise时如何为变量赋值。例如：

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

然后，当我尝试在render()的return语句中返回此值时，如下所示：

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

阅读 263

2020-07-22

共1个答案

小编典典

您使用React的方式有误。A
Promise旨在在以后的某个时间点返回结果。到您的诺言达到resolved或时rejected，您render将已经完成执行，并且诺言完成时不会更新。

render方法应仅取决于props和/或state呈现所需的输出。任何改变，prop或state将re-render您的组件。

首先，确定Promise组件生命周期中应该去的位置（此处）
在您的情况下，我将执行以下操作
- 在构造函数（ES6）中或通过初始化状态 getInitialState

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

* 然后在某个`componentWillMount`或`componentDidMount`最适合您的地方，在那叫诺言

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

2020-07-22