试图在Reactjs中实现SIMPLE承诺

Question

只是在React中第一次尝试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 resolved successfully.

但是,我不知道在使用promise时如何为变量赋值.例如:

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

然后当我尝试在render()'s 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>
    );
  }

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