Question

我有一个用于更新组件状态的类方法。我希望该方法返回一个承诺，该承诺将在组件更新时解决。我打算用来更新组件状态的方法只会在非常特殊的情况下被调用，因此使用componentDidUpdate的常规方法只会使事情变得非常复杂。

一些伪：

addItems(newItems) {

  this.setState({items: [...this.state.items, ...newItems]});

  return new Promise(resolve => {
    this.componentDidUpdate(() => resolve());
  });

}

有什么建议吗？

Answer 1

您可能有一个尚未解决的承诺，componentDidUpdate会解决，然后替换为新的承诺。然后，在addItems中，您等待当前的更新承诺解决。这样做的一个好处是，如果您在代码中有多个位置需要在更新发生时进行通知，那么它们都可以使用相同的promise。（您也可以使用添加到然后componentDidUpdate通知的回调数组来做到这一点，但是...基本上就是promise所做的，如果是promise，则可以使用各种promise组成模式，等等。，如果需要的话。）

添加方法：

createUpdatePromise() {
    this.updatePromise = new Promise(resolve => {
        this.resolveUpdatePromise = resolve;
    });
}

从构造函数调用它。

然后，在componentDidUpdate中：

this.resolveUpdatePromise();
this.createUpdatePromise();

addItems：

addItems(newItems) {
  this.setState({items: [...this.state.items, ...newItems]});

  this.updatePromise()
  .then(() => {
    // Updated
  });
}

Answer 2

如果您不想弄乱componentDidUpdate，则可以使用setState回调，该回调在状态更新并重新呈现后被调用。显然，建议在componentDidUpdate中使用这种逻辑。

this.setState({items: [...this.state.items, ...newItems]},function(){
    //gets called after state update and re-rendering.
});

React — componentDidUpdate作为承诺/回调。可能吗？

2 个答案: