
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
질문하기
LikePage에 찜한 데이터들을 가져오는 숙제를 하고 있습니다.
숙제 1,2 부분입니다.
리얼타임베이스 확인해보면 찜 버튼을 눌렀을때 like 안에 저장되는 것까지 확인이 되는데 실행했을때 찜 목록에 들어가면 자꾸 로딩페이지만 뜨고 데이터 반영이 안되는데 확인 부탁드립니다. 딕셔너리 안에 딕셔너리들이 존재하는 형태라 실행이 안될수도 있다고 하여 Object.values() 사용하여 해본 상태인데도 데이터가 반영이 안되네요
현재 LikePage.js 코드입니다.
import React,{useState, useEffect} from 'react';
import {ScrollView, Text, StyleSheet} from 'react-native';
import LikeCard from '../components/LikeCard';
import Constants from 'expo-constants';
import {firebase_db} from "../firebaseConfig"
import Loading from '../components/Loading';
export default function LikePage({navigation,route}){
//상태 생성하기
const [tip, setTip] = useState([])
// (1) ready 상태값 만들고 초기값을 true로 줍니다.
const [ready,setReady] = useState(true)
useEffect(()=>{
//사용자 고유 아이디를 가져와서
const user_id = Constants.installationId;
//방 주소를 정확하게 입력해주기 -> '/like/'+user_id
firebase_db.ref('/like/'+user_id).once('value').then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!")
let tip = snapshot.val();
//(2) 조건문 사용하기
console.log(tip)
//딕셔너리형태에서 리스트 형태로 바꿔주기 Object.values()함수 사용!!
let tip_list = Object.values(tip)
// tip_list에 데이터가 있을때 (길이가 0 초과일때)
if(tip_list.length > 0){
//tip데이터를 tip 상태에 넣어준다.
setTip(tip_list)
//setReady로 ready 상태를 false로 변경해준다,
setReady(false)
}
});
navigation.setOptions({
title:'꿀팁 찜'
})
})
return ready ? <Loading/>:(
<ScrollView style={styles.container}>
{
tip.map((content,i)=>{
return(<LikeCard key={i} content={content} navigation={navigation}/>)
})
}
</ScrollView>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:"#fff"
}
})
다음은 에러메시지입니다.
```
파이어베이스에서 데이터 가져왔습니다!!
null
[Unhandled promise rejection: TypeError: Cannot convert null value to object]
at pages\LikePage.js:null in firebase_db.ref.once.then$argument_0
at /private/var/folders/yw/6bx918xn4671rggfcdxz7fph0000gn/T/hermes/build_iphoneos/lib/InternalBytecode/InternalBytecode.js:53:15 in tryCallOne
at /private/var/folders/yw/6bx918xn4671rggfcdxz7fph0000gn/T/hermes/build_iphoneos/lib/InternalBytecode/InternalBytecode.js:139:26 in anonymous
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer
- ... 8 more stack frames from framework internals
```

다음은 아무 팁이나 들어가서 팁 찜하기 버튼을 눌렀을때 터미널에 뜨는 메시지입니다.

다음은 파이어베이스 리얼타임데이타 화면입니다.

