设置状态的新 Promise 接收箭头函数

Posted 2023-02-23

【中文标题】设置状态的新 Promise 接收箭头函数

【英文标题】：new Promise with set state receives an arrow function

【发布时间】：2021-12-04 04:04:11

【问题描述】：

我正在浏览一个反应代码库，在那里我看到 Promise 函数调用带有 2 个参数的 setstate，我无法准确理解它是如何工作的，在任何地方我都看到创建了一个具有一个对象参数的 setState，但在这里我们有一个 resolve 参数，它获取一个带有对象的 setstate 和一个调用 resolve 的箭头函数。另一个箭头函数，我不知道它在做什么以及这段代码是如何工作的

这就是我的状态

constructor(props)
        super(props);
        this.state = 
            articles:[],
            loading:true,
            page:1,
            totalResults : 0
        
    

这是我的代码库中的代码，我无法理解。

handleNextClick = async ()=>
    await new Promise(resolve => this.setState(page: this.state.page+1, () => resolve())); // same as await this.setState(page: this.state.page+1);
    await this.updateNews();

如您所见，Promise 正在接收 resolve 箭头函数，该函数使用对象和箭头函数调用 setstate。有人可以解释一下这是如何工作的吗？

【问题讨论】：

因为我们需要等到状态更新完毕，所以使用await，lly，也用于更新

回调运行状态已经更新，所以你不需要等待任何东西。

在我的情况下，页码稍后会更新，我们使用过时的页面变量调用 setState

@Andy 设置状态接收的第二个箭头函数参数是什么，何时调用它

【参考方案1】：

代码没有多大意义，这可能是它难以理解的原因。

setState has a callback option。所以你不需要承诺，也不需要等待 setState。此外，您可能也不需要等待 updateNews，因此您可以从 handleNextClick 函数中删除异步。

这可能是函数的样子。

handleNextClick () 

  // Set the new state, then use the callback option
  // to call `updateNews`
  this.setState(  page: this.state.page + 1 , () => 
    this.updateNews();
  );