javascript - 尝试在 Reactjs 中实现一个简单的 promise

Question

只是第一次在 React 中尝试 Promises。我有一个基本的 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 旨在稍后返回结果。当您的 promise 被resolved 或 rejected 时，您的 render 将完成执行并且它不会在 promise 完成时更新。

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

• 首先，确定您的 Promise 在组件的生命周期中应该去哪里 ( here )

• 在您的情况下，我会执行以下操作

  • 在您的构造函数 (ES6) 中或通过 getInitialState

    初始化一个状态

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