让 React 在长时间运行的任务之间渲染页面

Question

我在 Javascript 中有一个长期运行的任务。React 应该在任务之间的几个点重新渲染组件。但它仅在整个任务结束时重新渲染。如何让 React 在所有setState()调用中重新渲染页面？

一个简化的例子：

setStatePromise = (state) => new Promise(resolve => {

    this.setState(state, () => resolve());

});

longRunningTask = async () => {

    await this.setStatePromise({progress: 1}); // not shown to the user

    await doMuchWork();

    await this.setStatePromise({progress: 2}); // not shown to the user

    await doEvenMoreWork();

    await this.setStatePromise({progress: 3}); // shown to the user when everything is done

};

onButtonClick = async () => {

    await this.longRunningTask();

}

这是一个显示问题的工作示例：

https://codesandbox.io/s/intelligent-cori-31qn5

我之前使用的解决方法是：

setStatePromise = (state) => new Promise(resolve => {

    this.setState(state, () => {

        setTimeout(() => resolve(), 1);

    });

});

Answer 1

您没有在 中返回您的承诺longRunningTask，这是原因之一，但这也行不通。生成器可以解决这个问题，每次需要时都会产生承诺。