React — componentDidUpdate 作为承诺/回调。是否可以？

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，您等待解决当前更新承诺。这样做的一个好处是，如果代码中有多个地方需要在更新发生时得到通知，它们都可以使用相同的 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

  });

}