让 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，这是原因之一，但这也行不通。生成器可以解决这个问题，每次需要时都会产生承诺。