인프런 커뮤니티 질문&답변

terecal님의 프로필 이미지
terecal

작성한 질문수

React로 NodeBird SNS 만들기

5-5. 시퀄라이즈 Q&A와 DB 연결하기

댓글 입력후에 key 에러가 발생해요

작성

·

250

0

안녕하세요

댓글 달고 나서 키에러가 발생하는데

pages/index.js에서 key를 c.id 로 바꿔도 에러가 발생해여

어떻게 수정해야 되는지 알려주시면 감사여


https://stackoverflow.com/questions/58908628/i-got-a-key-error-after-entering-a-comment-i-dont-know-how-to-fix-react-propb/58908862#58908862

javascriptreact

답변 9

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

List의 renderItem에서 li 태그 대신에 List.item을 써보세요. 그런데 에러가 이것만 나는 게 맞나요?

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

소스코드 링크 올려보세요. 에러메시지 보니까 Comment 내부 List쪽인 것 같네요.

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

저 부분이 아니라 PostCard 내부 Comment가 문제인 것 같습니다. 댓글을 쓰셨으니까요

0

terecal님의 프로필 이미지
terecal
질문자

네 그렇게 해볼게여 감사합니다

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

그냥 제 소스코드를 복사붙여넣기 하는게 편하실 겁니다. git같은 툴 세팅해두고 복사 붙여넣기 하면 어느 부분이 다른지 표시돼요.

0

terecal님의 프로필 이미지
terecal
질문자

바꿔도 안되요 어디서 오타를 낸건지 ;
key 에러 말고 다른데서 찾아야 될것 같아여

근데 왜케 에러 찾기가 어려운지;

0

terecal님의 프로필 이미지
terecal
질문자

에러 전체는 더 있는거 같아요
에러 발생 순서는 key 에러가 제일 먼저 인데

다른  에러가 문제인것일까여;

일단 알려주신대로 고쳐볼게여 감사합니다

Uncaught TypeError: Cannot read property 'key' of undefined
    at List._this.renderItem (index.js:85)
    at index.js:195
    at Array.map (<anonymous>)
    at List._this.renderList (index.js:194)
    at updateContextConsumer (react-dom.development.js:19825)
    at beginWork$1 (react-dom.development.js:20202)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25738)
    at performUnitOfWork (react-dom.development.js:24662)
    at workLoopSync (react-dom.development.js:24638)
    at performSyncWorkOnRoot (react-dom.development.js:24237)
    at react-dom.development.js:12180
    at unstable_runWithPriority (scheduler.development.js:818)
    at runWithPriority$2 (react-dom.development.js:12130)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12175)
    at flushSyncCallbackQueue (react-dom.development.js:12163)
    at batchedUpdates$1 (react-dom.development.js:24359)
    at Object.notify (Subscription.js:23)
    at Subscription.notifyNestedSubs (Subscription.js:65)
    at Provider.notifySubscribers (Provider.js:59)
    at Subscription.handleChangeWrapper (Subscription.js:70)
    at Object.dispatch (redux.js:221)
    at e (<anonymous>:1:40553)
    at redux-saga-core.esm.js:1410
    at dispatch (redux.js:636)
    at io-6de156f3.js:133
    at redux-saga-core.esm.js:472
    at exec (redux-saga-core.esm.js:31)
    at flush (redux-saga-core.esm.js:87)
    at asap (redux-saga-core.esm.js:46)
    at runPutEffect (redux-saga-core.esm.js:468)
    at runEffect (redux-saga-core.esm.js:1204)
    at digestEffect (redux-saga-core.esm.js:1271)
    at next (redux-saga-core.esm.js:1161)
    at currCb (redux-saga-core.esm.js:1251)
List._this.renderItem @ index.js:85
(anonymous) @ index.js:195
List._this.renderList @ index.js:194
updateContextConsumer @ react-dom.development.js:19825
beginWork$1 @ react-dom.development.js:20202
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
beginWork$$1 @ react-dom.development.js:25738
performUnitOfWork @ react-dom.development.js:24662
workLoopSync @ react-dom.development.js:24638
performSyncWorkOnRoot @ react-dom.development.js:24237
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
notifySubscribers @ Provider.js:59
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
e @ VM256:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:636
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
proc @ redux-saga-core.esm.js:1108
(anonymous) @ redux-saga-core.esm.js:585
immediately @ redux-saga-core.esm.js:56
runForkEffect @ redux-saga-core.esm.js:584
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
takeCb @ redux-saga-core.esm.js:503
put @ redux-saga-core.esm.js:339
(anonymous) @ redux-saga-core.esm.js:376
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
(anonymous) @ PostCard.js:29
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:584
executeDispatchesInOrder @ react-dom.development.js:609
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5807
batchedEventUpdates$1 @ react-dom.development.js:24368
batchedEventUpdates @ react-dom.development.js:1419
dispatchEventForPluginEventSystem @ react-dom.development.js:5898
attemptToDispatchEvent @ react-dom.development.js:6014
dispatchEvent @ react-dom.development.js:5918
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
discreteUpdates$1 @ react-dom.development.js:24384
discreteUpdates @ react-dom.development.js:1442
dispatchDiscreteEvent @ react-dom.development.js:5885
Show 50 more frames
index.js:1 The above error occurred in the <Context.Consumer> component:
    in List (created by PostCard)
    in div (created by PostCard)
    in PostCard (created by Home)
    in Home (created by NodeBird)
    in div (created by Context.Consumer)
    in Col (created by AppLayout)
    in div (created by Context.Consumer)
    in Row (created by AppLayout)
    in div (created by AppLayout)
    in AppLayout (created by NodeBird)
    in Provider (created by NodeBird)
    in NodeBird (created by withRedux(NodeBird))
    in withRedux(NodeBird)
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Container.
console.<computed> @ index.js:1
r @ backend.js:6
logCapturedError @ react-dom.development.js:21810
logError @ react-dom.development.js:21847
callback @ react-dom.development.js:23235
callCallback @ react-dom.development.js:13810
commitUpdateEffects @ react-dom.development.js:13848
commitUpdateQueue @ react-dom.development.js:13838
commitLifeCycles @ react-dom.development.js:22102
commitLayoutEffects @ react-dom.development.js:25302
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25040
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
commitRoot @ react-dom.development.js:24889
finishSyncRender @ react-dom.development.js:24296
performSyncWorkOnRoot @ react-dom.development.js:24274
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
notifySubscribers @ Provider.js:59
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
e @ VM256:1
(anonymous) @ redux-saga-core.esm.js:1410
dispatch @ redux.js:636
(anonymous) @ io-6de156f3.js:133
(anonymous) @ redux-saga-core.esm.js:472
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
runPutEffect @ redux-saga-core.esm.js:468
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
Promise.then (async)
resolvePromise @ redux-saga-core.esm.js:395
runCallEffect @ redux-saga-core.esm.js:527
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
proc @ redux-saga-core.esm.js:1108
(anonymous) @ redux-saga-core.esm.js:585
immediately @ redux-saga-core.esm.js:56
runForkEffect @ redux-saga-core.esm.js:584
runEffect @ redux-saga-core.esm.js:1204
digestEffect @ redux-saga-core.esm.js:1271
next @ redux-saga-core.esm.js:1161
currCb @ redux-saga-core.esm.js:1251
takeCb @ redux-saga-core.esm.js:503
put @ redux-saga-core.esm.js:339
(anonymous) @ redux-saga-core.esm.js:376
exec @ redux-saga-core.esm.js:31
flush @ redux-saga-core.esm.js:87
asap @ redux-saga-core.esm.js:46
chan.put @ redux-saga-core.esm.js:375
(anonymous) @ redux-saga-core.esm.js:1412
(anonymous) @ PostCard.js:29
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:584
executeDispatchesInOrder @ react-dom.development.js:609
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5807
batchedEventUpdates$1 @ react-dom.development.js:24368
batchedEventUpdates @ react-dom.development.js:1419
dispatchEventForPluginEventSystem @ react-dom.development.js:5898
attemptToDispatchEvent @ react-dom.development.js:6014
dispatchEvent @ react-dom.development.js:5918
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
discreteUpdates$1 @ react-dom.development.js:24384
discreteUpdates @ react-dom.development.js:1442
dispatchDiscreteEvent @ react-dom.development.js:5885
Show 57 more frames
index.js:1 Warning: Container: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
    in Container (created by AppContainer)
    in AppContainer

0

terecal님의 프로필 이미지
terecal
질문자

https://github.com/hyunsokstar/node_bird_33
입니다 감사합니다
https://github.com/hyunsokstar/node_bird_33/blob/master/front/components/PostCard.js
https://github.com/hyunsokstar/node_bird_33/blob/master/front/pages/index.js

0

terecal님의 프로필 이미지
terecal
질문자

comment 내부에 어떤 부분인지 찾지를 못하겠어요 다른 컴퍼넌트에 key값을 추가해야 되는걸까요;

terecal님의 프로필 이미지
terecal

작성한 질문수

전체 Q&A
질문하기