React — componentDidUpdate 作为 promise/回调.可能吗

Question

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

一些伪：

addItems(newItems) {
  this.setState({items: [...this.state.items, ...newItems]});
  return new Promise(resolve => {
    this.componentDidUpdate(() => resolve());
  });
}

有什么建议吗？

Answer 1

如果你不想弄乱componentDidUpdate，你可以使用 setState 回调，它在状态更新和重新渲染后被调用。显然，建议在componentDidUpdate中使用这样的逻辑.

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

Answer 2

你可以有一个未解决的承诺，componentDidUpdate解决，然后用一个新的承诺替换。然后，在 addItems 中，您等待当前更新承诺解析。这样做的一个优点是，如果代码中有多个位置需要在更新发生时通知，则它们都可以使用相同的承诺。(您也可以使用添加到然后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
  });
}