尝试在 Reactjs 中实现一个简单的Promise

IT技术 javascript reactjs asynchronous promise
2021-04-02 13:37:41

只是第一次在 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>
    );
  }
2个回答

你用React错了方法。APromise旨在稍后返回结果。到您的Promise已经resolved或时rejected，您render将完成执行并且在Promise完成时它不会更新。

render方法应该只依赖props和/或state呈现所需的输出。任何改变，prop或state将re-render您的组件。

  • 首先，确定您Promise应该在组件的生命周期中的哪个位置（此处）

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

    • 在构造函数（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>
 );
}
那行得通！我之前确实尝试过，但它没有返回正确的状态值，不知道为什么。也许是拼写错误/语法错误...无论如何，谢谢！
2021-06-09 13:37:41

你需要考虑你所在的作用域。当你在你传递给的函数中时promise.then，你在一个新的块作用域中，因此你在函数中创建的任何变量都不会存在于它的作用域之外。我不确定你是如何定义 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 视频，以帮助您了解thisjavascript 中的关键字。

其它你可能感兴趣的问题
上一篇在 React.JS 中刷新后，如何让用户保持登录 Firebase？ 下一篇在 Google App Engine 上部署 create-react-app