남은 호출 수를 표시하기 위해 진행률 표시줄을 표시하는 동시에 테이블에 표시하기 위해 원격 리소스에 200번의 호출을 시도하고 있습니다.

이 예제를 사용하여 Fetch() 및 Promise.all() / code>를 사용하여 새 데이터를 업데이트합니다.

내 문제는 각 약속의 .then()에 있습니다. 이 코드는 일부 논리를 계산한 다음 setState()를 호출하여 데이터를 업데이트합니다.

내 진행률 표시줄은 Object.keys(data).length를 사용하여 진행 상황을 표시합니다.

Promise.all()가 "완료" 상태를 트리거하고 진행률 표시줄을 제거한 후에도 Promise 자체는 여전히 then() , 해결된 모든 Promise가 표시되기 전에 진행률 표시줄이 숨겨집니다.

이 문제를 올바르게 처리하는 방법은 무엇입니까?

데모, setTimeout()을 사용하여 비용이 많이 드는 로직을 시뮬레이션하세요.

문제는 Promise.all.then: 20이 Render 20 뒤에 와야 한다는 것입니다.

렌더 0 ... 렌더 12 Promise.all.then: 20 # 매 렌더 후에 이것을 기록해야 합니다. 렌더 13 ... 렌더 19 렌더 20 

데모에서 문제를 보여주기 위해 진행률 표시줄이 완전히 채워지기 전에 제거되었습니다(빨간색으로 바뀌었습니다).

const { useState } = 반응; const 예 = () => { const [완료, setDone] = useState(false); const [data, setData] = useState({}); const decoData = Array.from(Array(20).keys()); const 데모Resolver = (x) => new Promise(res => setTimeout(() => res(x), Math.random() * 1250)) const loadData = () => { const promise = decoData.map(c => decoResolver(c)); promise.forEach(약속 => { 약속하다 .then(r => { setTimeout(() => { setData(p => ({ ...p, [r]: r })); }, 500); }) }); Promise.all(약속) .then(r => { console.log('Promise.all.then: ', r.length) 설정완료(true); }) } console.log('렌더링', Object.keys(data).length); const ProgressBarIsShownDebugColor = (완료) ? '위험하다' : '정보입니다'; 반품 ( 
 
{'예'}
 <진행상황 최대={demoData.length} 값={Object.keys(data).length} className={'progress my-3 ' + ProgressBarIsShownDebugColor} /> 시작  ) } ReactDOM.render(<예제 />, document.getElementById("react"));

.as-console-wrapper { 최대 높이: 50px !important; }