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

小能豆

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

javascript

第一次在 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"
  });

果然，当承诺条件匹配时（name === 'Dave'），我的控制台记录Promise resolved successfully。

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

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

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

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

阅读 31

2024-06-10

共1个答案

小能豆

您使用的React方式错误。APromise旨在稍后返回结果。当您的承诺被resolved或时rejected，您的承诺render将完成执行，并且承诺完成时它不会更新。

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

首先，确定你Promise应该在组件的生命周期中去往何处（此处）
对于你的情况，我会做以下事情
在构造函数中初始化状态（ES6）或通过getInitialState

js constructor(props) { super(props); this.state = { name: '', }; }
然后componentWillMount，或者componentDidMount以你方便的方式，在那里调用承诺

```js
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方法中写一些类似这样的内容。

js render() { return ( <div className="App"> <h1>Hello World</h1> <h2>{this.state.name}</h2> </div> ); }

2024-06-10