[LAB-7] state값 유무에 따라 상세페이지로 가지 않는 문제

질문 작성자

김하연

문제 상황

// 2. 도큐멘트 추가 요청
      const docRef = await addDoc(collection(dbService, "question"), {
        category: selected,
        title: inputTitle,
        content: inputContent,
        hashtag: inputHashTagList,
        image: inputFileImage,
        id: "",
        date: "",
        createdAt: Date.now(),
        hits: 0,
        like: 0,
        user: {
          email: user.email,
          nickname: user.displayName,
          profiles: user.photoURL,
          userId: userData,
        },
      });

위와 같이 데이터를 넘겼을 때는 바로 리스트 페이지로 가며 새로고침해야 등록글이 나옵니다.

하지만 제가 직접 이 컴포넌트에서 리코일로 만들어준 읽기 전용 값들만 넣었을 때, 콘솔에 값은 찍히지만 오류가 나며 빈 화면이 나옵니다.

const docRef = await addDoc(collection(dbService, "question"), {
        category: selected,
        title: inputTitle,
        content: inputContent,
        hashtag: inputHashTagList,
        image: inputFileImage,
      });

하지만 리스트로 넘어간 후 새로고침 했을 때는 해당 페이지로 넘어가기는 합니다..

이런 문제가 생겼을 때는 어떻게 해야하나요? hit, like 는 아직 기능을 구현하지 못해 임의로 값만 넘긴 상태입니다.

추가적으로.. 회원가입을 한 상태에서 테스트를 했습니다! (user 정보가 넘어가는지 확인하기 위해) 그리고 recoil-persist를 설치했는데 그냥 npm i 로 하면 설치가 안되는 것 같아서.. npm i recoil-persist 를 해야 설치가 정상적으로 잘 되는 것 같습니다!! 혹시나 해서 추가적인 사항 남깁니다!

프로젝트 저장소 URL

https://github.com/Likelion-lucky7/DECO/tree/question-write-data%23118

브랜치명 : question-write-data#118

문제 해결

문제 해결을 위해 수정한 파일은 아래와 같습니다.

useAuthState.js

QuestionWrite.jsx

QuestionDetail.jsx

getQuestionData.jsx

첨부된 가이드 파일을 다운로드 받은 후 확인해보세요.

문제 해결의 핵심은 셀렉터 패밀리를 사용해 비동기 요청/응답을 처리하는 것입니다.

getQuestionData.jsx

아래는 getQuestionByid 셀렉터 패밀리 코드입니다.

export const getQuestionByid = selectorFamily({ key: "getQuestionByid", get: (documentId) => async () => { const docSnapshot = await getDoc(doc(dbService, `question/${documentId}`)); return { id: docSnapshot.id, ...docSnapshot.data() }; }, });

QuestionDetail.jsx

아래는 getQuestionByid 셀렉터 패밀리를 사용해 Firestore에서 문서 ID값으로 문서를 요청/응답한 결과를 사용하는 예입니다.

const questionData = useRecoilValue(getQuestionByid(id)); const { title, content, image, user, category, hashTag, like, hits } = questionData;

아래는 문제가 해결된 영상입니다.

yamoo9 / likelion-FEQA