试图在Reactjs

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()的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。 Promise旨在在稍后的时间点返回结果。当您的承诺为resolved或rejected时，您的render将完成执行，并且在承诺完成时不会更新。

render方法应仅依赖于props和/或state来呈现所需的输出。对prop或state的任何更改都会re-render您的组件。

• 首先，确定Promise在组件生命周期中的位置（here）

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

  • 在构造函数（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>
     );
    }
    

Answer 2

你需要考虑你所在的范围。当你在函数中传递给promise.then时，你处于一个新的块范围内，因此你在函数中创建的任何var都赢了不存在于其范围之外。我不确定你是如何定义你的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))

我建议您观看this egghead video，以帮助您了解javascript中的this关键字。