중복된 키가 감지됨: 이로 인해 업데이트 오류가 발생할 수 있습니다. [Vue 순회 렌더링 오류에 대한 해결 방법]

오늘 프로젝트 작성 중 중첩된 댓글을 순회하던 중 콘솔에 오류 메시지가 떴으나 페이지 렌더링에는 영향을 미치지 않았는데, 그러다가 이런 오류가 발생하는 원인이 키 값이 중복되었기 때문이라는 것을 알았습니다. 문제의 해결책은 매우 간단합니다. (vue for 루프가 키 값을 읽을 때 키는 고유해야 합니다. 키 값이 반복되면 오류가 보고되고 페이지 렌더링에 영향을 미칩니다.)

① 원본 코드:

<div  v-for="item in commentList" :key="item.id">
    <img :src="item.avatar" alt="" >
    <div style="flex: 1">
      <!--一级评论-->
      <div style="margin-bottom: 10px">
        <div >{
   
   { item.userName }}</div>
        <div >{
   
   { item.content }}</div>
        <div >{
   
   { item.time }}</div>
      </div>
      <!--子级评论-->
      <div v-for="sub in item.children" :key="sub.id">
        <img :src="sub.avatar" alt="" >
        <div >
          <div >{
   
   { sub.userName }} <span  v-if="sub.replyUser !== item.userName">回复  {
   
   { sub.replyUser }}</span></div>
          <div>{
   
   { sub.content }}</div>
          <div >{
   
   { sub.time }}</div>
        </div>
      </div>
    </div>
  </div>

② 새로운 코드:

<div  v-for="item in commentList" :key="item.id">
    <img :src="item.avatar" alt="" >
    <div style="flex: 1">
      <!--一级评论-->
      <div style="margin-bottom: 10px">
        <div >{
   
   { item.userName }}</div>
        <div >{
   
   { item.content }}</div>
        <div >{
   
   { item.time }}</div>
      </div>
      <!--子级评论-->
      <div v-for="(sub,i) in item.children" :key="sub.id+i">
        <img :src="sub.avatar" alt="" >
        <div >
          <div >{
   
   { sub.userName }} <span  v-if="sub.replyUser !== item.userName">回复  {
   
   { sub.replyUser }}</span></div>
          <div>{
   
   { sub.content }}</div>
          <div >{
   
   { sub.time }}</div>
        </div>
      </div>
    </div>
  </div>

for 루프 뒤에 키 값을 추가해야 하는 이유는 무엇입니까? 그렇지 않으면 대중화될 것이며 어떤 영향을 미칠까요?

for 루프가 키 값을 읽을 때 키는 고유해야 하며, 키 값이 반복되면 오류가 보고되고 페이지 렌더링이 중단됩니다.

해결책

순회할 때 키에 임의의 값을 추가하기만 하면 되며, 가장 간단한 방법은 인덱스를 순회하면서 동시에 키를 추가하는 것입니다.
<div v-for="(item, i) in items2" :key="'A'+ i"></div>