<p>pages &gt; index.js 에서 PostCard key값을 post.id로 주고 회원가입 창으로 이동하면 Encountered two children with the same key 에러가 발생합니다. 그런데 index로 값을 주면 또 에러가 안나네요...?ㅜㅜㅜㅜ</p>
<p>index는 사용하면 안되는걸로 알고 있어서 key값을 post.id + post.content로 줬는데도 에러가 발생합니다.</p>
<p>index값으로 키값을 줘도 괜찮나요?</p>
<div style="color: #eeffff; background-color: #212121; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div></div>
<div><span style="color: #f07178;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #89ddff;">&lt;</span><span style="color: #ffcb6b;">AppLayout</span><span style="color: #89ddff;">&gt;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">{</span>me&nbsp;<span style="color: #89ddff;">&amp;&amp;</span>&nbsp;<span style="color: #89ddff;">&lt;</span><span style="color: #ffcb6b;">PostForm</span><span style="color: #89ddff;">&nbsp;</span><span style="color: #89ddff;">/&gt;}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">{</span>mainPosts<span style="color: #89ddff;">.</span><span style="color: #82aaff;">map</span>(<span style="color: #89ddff;">(</span>post<span style="color: #89ddff;">,</span>&nbsp;index<span style="color: #89ddff;">)</span>&nbsp;<span style="color: #c792ea;">=&gt;</span>&nbsp;(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">&lt;</span><span style="color: #ffcb6b;">PostCard</span><span style="color: #89ddff;">&nbsp;</span><span style="color: #c792ea;">key</span><span style="color: #89ddff;">={</span>index<span style="color: #89ddff;">}&nbsp;</span><span style="color: #c792ea;">post</span><span style="color: #89ddff;">={</span>post<span style="color: #89ddff;">}&nbsp;</span><span style="color: #89ddff;">/&gt;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;))<span style="color: #89ddff;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">&lt;/</span><span style="color: #ffcb6b;">AppLayout</span><span style="color: #89ddff;">&gt;</span></div>
</div>

<p>mainPosts를 console.log찍어보세요. 그리고 중복된 데이터가 두 개 이상 들어있는지 확인하시고, 들어있다면 왜 중복된 데이터가 들어갔는지 확인해보시면 됩니다. redux-devtools로 mainPosts의 변화를 추적해보세요.</p>

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

Encountered two children with the same key 에러