4주차 HW1 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

4주차 HW1

[왕초보] 나만의 수익성 앱, 앱개발 종합반

4주차

최*희

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

getLke함수를 만들어 firebase realtime database에서 찜한 데이터를 불러올때

아래 return문의 tip.map함수가 정의되어 있지 않아 Mainpage에서 꿀팁 찝버튼을 클릭할때 오류페이지가 나타납니다.

확인해보니 firebase realtime database에서 가져온 데이터는 딕셔너리 않에 딕셔너리가 되어있는 형태라서 그런건가 싶어 문의드립니다.

작성한 코드 및 에러 메세지

작성한 코드

import React, { useState, useEffect } from 'react';

import { ScrollView, StyleSheet, Platform } from 'react-native';

import LikeCard from '../components/LikeCard';

import { firebase_db } from '../firebaseConfig';

import * as Application from 'expo-application';

import Loading from '../components/Loading';

const isIOS = Platform.OS === 'ios';

export default function LikePage({ navigation, route }) {

const [tip, setTip] = useState([{

"idx": 3,

"category": "재테크",

"title": "잠자는 내 돈을 찾아라",

"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

"desc": "‘새는 돈’에는 미처 몰랐던 카드 포인트, 휴면예금이나 환급금도 포함됩니다. 확실히 파악하지 못한 잠자는 돈을 찾아보고 자투리 돈들을 모으는 것도 중요합니다. 케이블방송, 위성방송 서비스를 이용하면서 중복 납부한 요금, 셋톱박스 보증금 등 돌려받지 않은 돈이 있는지 확인 해보세요. 또, 카드 포인트 통합 조회 서비스를 이용해 여러 개의 카드 포인트가 모두 얼마인지 체크해두는 것이 좋습니다. 보험해약 환급금, 휴면 보험금이나 휴면 예금을 찾아보고 돌려받는 일도 요즘에는 어렵지 않습니다.",

"date": "2020.09.09"

{

"idx": 4,

"category": "재테크",

"title": "할인행사, 한정할인판매 문구의 함정 탈출!",

"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money2.png",

"desc": "‘안 사면 100% 할인’이라는 말 들어보셨나요? 견물생심, 좋은 물건을 보면 사고 싶기 마련입니다. 특히 대대적인 ‘할인 행사’ 중인 대형 마트에 갔을 때는 말할 것도 없겠죠. 따라서 생필품을 살 때, 한꺼번에 사서 사용하는 것보다 필요할 때 조금씩 구매하는 편이 좋습니다. 장을 보면서 대형마트에 자주 가다 보면 지금 필요한 것뿐 아니라 앞으로 필요할 것까지 사게 되어 지출이 커지기 때문입니다. 특히 할인 품목을 보면 뜻하지 않은 소비를 하는 경우도 많아진다. 홈쇼핑, 대형마트 등의 ‘할인행사’, ‘한정할인판매’ 등의 문구를 조심하세요. ",

"date": "2020.09.09"

}])

// const [tip, setTip] = useState([])

const [ready, setReady] = useState(true)

useEffect(() => {

setTimeout(() => {

navigation.setOptions({

title: "꿀팁 찜",

headerStyle: {

backgroundColor: "gray",

borderBottomColor: "gray",

shadowColor: "gray",

height: 50

headerTintColor: "#fff",

})

getLike();

setReady(false)

}, 100)

// setTip(route.params)

}, [])

const getLike = async () => {

let userUniqueId;

if (isIOS) {

let iosId = await Application.getIosIdForVendorAsync();

userUniqueId = iosId

} else {

userUniqueId = await Application.androidId

}

console.log(userUniqueId)

firebase_db.ref('/like/' + userUniqueId).once('value').then((snapshot) => {

console.log('파이어 베이스에서 찜한 데이터를 가져왔습니다.')

let tip = snapshot.val();

console.log(tip)

setTip(tip);

})

}

return ready ? <Loading /> : (

{

tip.map((content, i) => {

return (<LikeCard content={content} key={i} navigation={navigation} />)

})

}

</ScrollView>

)

}

오류메세지

TypeError: undefined is not a function (near '...tip.map...')

This error is located at:

in LikePage (created by SceneView)

in StaticContainer

in EnsureSingleNavigator (created by SceneView)

in SceneView (created by CardContainer)

in RCTView (created by View)

in View (created by CardContainer)

in RCTView (created by View)

in View (created by CardContainer)

in RCTView (created by View)

in View

in CardSheet (created by Card)

in RCTView (created by View)

in View (created by AnimatedComponent)

in AnimatedComponent

in AnimatedComponentWrapper (created by PanGestureHandler)

in PanGestureHandler (created by PanGestureHandler)

in PanGestureHandler (created by Card)

in RCTView (created by View)

in View (created by AnimatedComponent)

in AnimatedComponent

in AnimatedComponentWrapper (created by Card)

in RCTView (created by View)

in View (created by Card)

in Card (created by CardContainer)

in CardContainer (created by CardStack)

in RNSScreen (created by AnimatedComponent)

in AnimatedComponent

in AnimatedComponentWrapper (created by InnerScreen)

in Suspender (created by Freeze)

in Suspense (created by Freeze)

in Freeze (created by DelayedFreeze)

in DelayedFreeze (created by InnerScreen)

in InnerScreen (created by Screen)

in Screen (created by MaybeScreen)

in MaybeScreen (created by CardStack)

in RNSScreenContainer (created by ScreenContainer)

in ScreenContainer (created by MaybeScreenContainer)

in MaybeScreenContainer (created by CardStack)

in RCTView (created by View)

in View (created by Background)

in Background (created by CardStack)

in CardStack (created by HeaderShownContext)

in RNCSafeAreaProvider (created by SafeAreaProvider)

in SafeAreaProvider (created by SafeAreaInsetsContext)

in SafeAreaProviderCompat (created by StackView)

in RCTView (created by View)

in View (created by GestureHandlerRootView)

in GestureHandlerRootView (created by StackView)

in StackView (created by StackNavigator)

in PreventRemoveProvider (created by NavigationContent)

in NavigationContent

in Unknown (created by StackNavigator)

in StackNavigator (created by StackNavigator)

in StackNavigator (created by App)

in EnsureSingleNavigator

in BaseNavigationContainer

in ThemeProvider

in NavigationContainerInner (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent)

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException

at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:null in showErrorDialog

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in logCapturedError

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in update.callback

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in callCallback

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitUpdateQueue

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffectOnFiberat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutMountEffects_complete

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffects_beginat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffects

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitRootImpl

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitRoot

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performSyncWorkOnRoot

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSyncCallbacks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSyncCallbacksOnlyInLegacyMode

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in scheduleUpdateOnFiber

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in dispatchSetState

at node_modules\promise\setimmediate\core.js:null in tryCallOne

at node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0

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

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue

[Unhandled promise rejection: TypeError: undefined is not a function (near '...tip.map...')]

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderWithHooks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in updateFunctionComponent

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in beginWork$1

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performUnitOfWork

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in workLoopSync

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderRootSync