Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.

React Native 하면서 여러 우여곡절과 많은 에러를 만나고 있다.

 

 

이번에 만난 에러.

 

Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4380:15 in checkPropTypes
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5052:20 in processChildContext
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5095:45 in invalidateContextProvider
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12510:29 in finishClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:12403:43 in updateClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19181:22 in beginWork$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18085:22 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at App.js:35:37 in AppLoading.props.onFinish
at node_modules\expo-app-loading\build\AppLoading.js:41:12 in startLoadingAppResourcesAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

 

키값이 string이 아니어서 생기는 문제. 키값을 string으로 변환해주면 된다.

 

https://github.com/jnosornov/reactNativeTodos/issues/4

 

 

export default function Home({navigation}) {


    const [reviews, setReviews] = useState([
        {title:'book a', rating:5, body: 'first book', key:1},
        {title:'book b', rating:4, body: 'second book', key:2},
        {title:'book c', rating:3, body: 'third book', key:3},

당시 사용중이던 코드는 이러했는데 해당코드를 아래처럼 바꾸어주었다. (key :1 => key="1")

 

 

 

export default function Home({navigation}) {


    const [reviews, setReviews] = useState([
        {title:'book a', rating:5, body: 'first book', key:"1"},
        {title:'book b', rating:4, body: 'second book', key:"2"},
        {title:'book c', rating:3, body: 'third book', key:"3"},

변경 후 소스