TIL_50_230106

50일 차 회고

• 파이어베이스 마이페이지 프로필 여러개 수정

파이어베이스 마이페이지 프로필 여러개 수정

에러 상황

fireBase에 addDoc을 통해 프로필 닉네임, 자기소개 추가 성공하였고

query를 통해 수정된 프로필을 가져오게 되면 여러개가 나오게 된다.

useEffect(() => {
    // 1. onSnapshot API를 이용해서 todos 콜렉션에 변경이 생길 때 마다
    // 2. todos 콜렉션 안의 모든 document들을 불러와서 setTodos 한다.
    const q = query(
      collection(dbService, 'profile'),
      orderBy('createdAt', 'desc')
      // where('userId', '==', authService.currentUser?.uid)
    );

    onSnapshot(q, (snapshot) => {
      const newProfiles = snapshot.docs.map((doc) => {
        console.log('doc', doc.data());
        const newProfile = {
          id: doc.id,
          ...doc.data(),
        };
        return newProfile;
      });
      setProfile(newProfiles);
    });
  }, []);
  const profileFirst = profile[0];

에러 해결 시도

• 프로필이 잘 들어갔나 콘솔 profile[0]로 확인 하여 첫번째 프로필 내용만 가져오는 것을 확인하였고,
• profileFirst 라는 변수에 저장 하였다.
• 다음 다시 맵을 돌려 저장된 값을 가져 오려고 하였으나 실패.

  • 원인: 이미 map으로 돌려 첫번째 객체를 가져온 상태에서 한번더 맴을 돌렸으니 당연히 안되었던것

    {profileFirst.map((item) => (
              <View>
                <ProfileId>{item.nickName}</ProfileId>
                <ProfileText>{item.profileText}</ProfileText>
              </View>
            ))}

에러 해결시도 2

• map을 돌리지 않고 저장한 profileFirst에서 가져오려고 했으나 또 에러.
  • 원인: firebase에서 내용을 get하기전에 렌더링 하려고 하여서 에러가 났다.

<View>
  <ProfileId>{profileFirst.nickName}</ProfileId>
  <ProfileText>{profileFirst.profileText}</ProfileText>
</View>

에러 해결

• 옵셔널체이닝을 통해 에러 해결

<View>
  <ProfileId>{profileFirst?.nickName}</ProfileId>
  <ProfileText>{profileFirst?.profileText}</ProfileText>
</View>