React/nextjs 구성요소에 표시하기 위해 Firebase 저장소에서 다운로드 링크 목록을 가져오려고 합니다.

Question

어레이를 가져오려고 하면 데이터가 항상 비어 있습니다. 내가 어디로 잘못 가고 있는지 아는 사람이 있습니까? 콘솔을 확인한 결과, Firebase 저장소에 대한 참조는 있지만 데이터는 없습니다. 그런데 내 저장소에 URL 링크를 출력해야 하는 문서가 4개 있습니다. 이것이 내 구성 요소입니다

으아악

위 구성요소는 지도 연결 목록을 시도하고 예상했지만 데이터가 표시되지 않았습니다. 그리고 pdfUrls는 항상 비어 있습니다.

Answer 1

문제는 여기에 있습니다:

으아아아

listAll 和 getDownloadURL 이는 모두 비동기 작업이므로 완료하는 데 다소 시간이 걸릴 수 있습니다. 메인 코드는 전체 스크립트를 차단하지 않지만 작업이 진행되는 동안 계속 실행됩니다. 그런 다음 데이터(파일 목록 또는 다운로드 URL)를 사용할 수 있을 때 콜백 블록을 실행합니다.

이것은 setPdfUrls(urls); 在任何 urls.push(url);가 이전에 실행되고 빈 목록이 설정됨을 의미합니다. 디버거에서 이를 확인하거나 일부 로깅을 추가하는 것이 좋습니다.

---

문제를 해결하는 가장 쉬운 방법은 setPdfUrls(urls); 을 내부 콜백:

으로 이동하는 것입니다. 으아아아

이제 각 다운로드 URL이 결정된 후 호출됩니다. 이렇게 하면 여러 업데이트가 수행되므로 UI가 약간 깜박일 수 있지만 이제 데이터가 표시됩니다.

---

모든 것이 완료되기를 기다리는 동안 한 번만 호출하면 setPdfUrls(urls); 需要做更多的工作。最简单的方法可能是将整个 useEffect 处理程序标记为 async 并在其中使用 await 더 많은 작업이 필요합니다. 가장 쉬운 방법은 아마도 전체 useEffect 핸들러를 async로 표시하고 그 안에 await를 사용하는 것입니다.

으아아아

이 코드는:

• 사용 await 确保异步操作在调用 setPdfUrls이전에 완료되었습니다.
• 사용for...of 循环来确保我们可以在该循环内使用 await.