React/nextjs 구성요소에 표시하기 위해 Firebase 저장소에서 다운로드 링크 목록을 가져오려고 합니다.
P粉4810352322023-09-15 18:34:49
0
1
715
어레이를 가져오려고 하면 데이터가 항상 비어 있습니다. 내가 어디로 잘못 가고 있는지 아는 사람이 있습니까? 콘솔을 확인한 결과, Firebase 저장소에 대한 참조는 있지만 데이터는 없습니다. 그런데 내 저장소에 URL 링크를 출력해야 하는 문서가 4개 있습니다. 이것이 내 구성 요소입니다
으아악
위 구성요소는 지도 연결 목록을 시도하고 예상했지만 데이터가 표시되지 않았습니다. 그리고 pdfUrls는 항상 비어 있습니다.
listAll和getDownloadURL이는 모두 비동기 작업이므로 완료하는 데 다소 시간이 걸릴 수 있습니다. 메인 코드는 전체 스크립트를 차단하지 않지만 작업이 진행되는 동안 계속 실행됩니다. 그런 다음 데이터(파일 목록 또는 다운로드 URL)를 사용할 수 있을 때 콜백 블록을 실행합니다.
이것은setPdfUrls(urls);在任何urls.push(url);가 이전에 실행되고 빈 목록이 설정됨을 의미합니다. 디버거에서 이를 확인하거나 일부 로깅을 추가하는 것이 좋습니다.
문제를 해결하는 가장 쉬운 방법은setPdfUrls(urls);을내부 콜백:
으로 이동하는 것입니다. 으아아아
이제 각 다운로드 URL이 결정된 후 호출됩니다. 이렇게 하면 여러 업데이트가 수행되므로 UI가 약간 깜박일 수 있지만 이제 데이터가 표시됩니다.
모든 것이 완료되기를 기다리는 동안 한 번만 호출하면setPdfUrls(urls);需要做更多的工作。最简单的方法可能是将整个useEffect处理程序标记为async并在其中使用await더 많은 작업이 필요합니다. 가장 쉬운 방법은 아마도 전체useEffect핸들러를async로 표시하고 그 안에await를 사용하는 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
문제는 여기에 있습니다:
으아아아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.