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

Posted 2023-03-07

【中文标题】尝试在 Reactjs 中实现一个简单的承诺

【英文标题】：Trying to implement a SIMPLE promise in Reactjs

【发布时间】：2017-02-23 02:25:30

【问题描述】：

刚刚在 React 中首次尝试 Promises。我有一个基本的承诺（从别人的代码中提取），但不知道如何使它变得有用。

到目前为止我所拥有的（在我的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>
    );
  

【问题讨论】：

对于初学者，您在每个函数中声明了一个新变量。您需要在回调之外声明 newName 以便它们引用相同的变量。

尝试(result) => ... 可能会为您提供正确的关闭上下文

@MeirionHughes 这会有什么不同？他们甚至没有使用this。

@Paulos3000 您仍在回调中声明newName。 var newName 声明了一个新变量。这就是var 所做的。

Rendering React components with promises inside the render method 的可能重复项？

【参考方案1】：

您以错误的方式使用React。 Promise 旨在稍后返回结果。当你的 promise 变为 resolved 或 rejected 时，你的 render 将完成执行，并且当 promise 完成时它不会更新。

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

首先，确定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>
 );

【讨论】：

成功了！我实际上之前尝试过，但它没有返回正确的状态值，不知道为什么。可能是拼写错误/语法错误...无论如何，谢谢！

【参考方案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 关键字。