Closed kyuran6 closed 1 year ago
getDoc
함수가 아니라, getDocs
함수로 쿼리 요청합니다.moreImgArr
상태 업데이트 합니다.const getCategories = async () => {
// ...
const moreImgListPromises = categoryList.map((item) => {
const q2 = query(
collection(db, 'images'),
where('category_uid', '==', item)
);
// getDocs 함수를 사용해 2번째 쿼리 요청
return getDocs(q2).then(({ docs }) => {
return docs.map((doc) => doc.data().url);
});
});
// Promise.all을 사용해 모든 비동기 요청이 완료되면 처리
Promise.all(moreImgListPromises).then((datas) => {
const urls = datas.reduce((urls, data) => [...urls, data[0]], []);
setMoreImgArr(urls);
});
};
HomePage 컴포넌트 JSX 영역 코드는 아래와 같이 수정합니다.
<S.SeeMoreSection>
{visible &&
moreImgArr &&
moreImgArr.map((url) => <SeeMoreImg key={url} src={url} />)
}
</S.SeeMoreSection>
그러면 결과는 다음 영상과 같습니다. 😊
첨부된 가이드 파일을 다운로드 받아 확인해보세요.
답변 정말 감사합니다!
질문 작성자
김진희
문제 상황
파이어스토어에서 특정 user_uid가 아니며, isAllow 값이 true인 category_uid를 categories 컬렉션에서 하나 가져옵니다 (첫번째 쿼리)
그 다음 images컬렉션에서 그 category_uid를 가진 이미지 중 3장을 보여줍니다 (두번째 쿼리)
category_uid를 가져오는것까지는 성공했으나, 이미지가 보이진 않고 다음과 같은 에러가 뜹니다
프로젝트 저장소 URL
node_modules
폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus.zip환경 정보