我在 Javascript 中有一個(gè)長(zhǎng)期運(yùn)行的任務(wù)。React 應(yīng)該在任務(wù)之間的幾個(gè)點(diǎn)重新渲染組件。但它僅在整個(gè)任務(wù)結(jié)束時(shí)重新渲染。如何讓 React 在所有setState()調(diào)用中重新渲染頁(yè)面?一個(gè)簡(jiǎn)化的例子: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();}這是一個(gè)顯示問題的工作示例:https://codesandbox.io/s/intelligent-cori-31qn5我之前使用的解決方法是:setStatePromise = (state) => new Promise(resolve => { this.setState(state, () => { setTimeout(() => resolve(), 1); });});
讓 React 在長(zhǎng)時(shí)間運(yùn)行的任務(wù)之間渲染頁(yè)面
繁星點(diǎn)點(diǎn)滴滴
2021-09-30 10:30:24