ReactCSSTransitionGroup 고유 키 오류

누군가가이 문제에 대해 의견을 나눌 수 있기를 바랍니다. 많은 시도 끝에 ReactCSSTransitionGroup을 내 반응 앱에 올바르게 가져올 수있었습니다. 이제 다음과 같은 경고 메시지가 표시되고 전환이 작동하지 않습니다.ReactCSSTransitionGroup 고유 키 오류

경고 : 배열이나 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다.

주 App.js 파일에서 내 구성 요소를 ReactCSSTransitionGroup 요소와 함께 포장했습니다.

return (
    <div className="container"> 
    <Navigation /> 
     <div className="app-items-container"> 
      { 
      this.state.notes.map((note) => { 
       return(
        <ReactCSSTransitionGroup {...transitionOptions}> 
         <Note noteContent={note.noteContent} 
         noteId={note.id} 
         key={note.id} 
         removeNote={this.removeNote} /> 
        </ReactCSSTransitionGroup> 
        ) 
       }) 
      } 
     </div> 
    <Form addNote={this.addNote} /> 
    </div> 
);

내 구성 요소에 이미 전달 된 키가 있습니다. 열쇠를 어디에 적용해야합니까? 덕분에 고급.

출처

2017-12-26 Micposso

note.id는 고유 한 값을 – lfender6445

ReactCSSTransitionGroup을 .map 함수 안에 넣고 싶지 않습니다. 그것은 밖에 있어야하고 ReactCSSTransitionGroup은 각자의 자식 (노트 구성 요소)에 마법을 추가 할 것입니다.

DOM에서 추가/제거 될 때 자식의 '각'에 추가 라이프 사이클 메소드를 추가하여 작동합니다. 따라서 ReactCSSTransitionGroup을 사용하여 각 메모 구성 요소를 래핑 할 필요가 없습니다. 단순히 모든 메모를 자식으로 포함해야합니다.

ReactCSSTransitionGroup이 스팬에서 자식을 래핑하기 때문에 키 경고가 표시됩니다. .MAP 루프에서 다음과 같이 나타납니다 반응하는 경우 :

<span> <Note key={note.id} /> </span> 
<span> <Note key={note.id} /> </span> 
<span> <Note key={note.id} /> </span>

가 고유 키를 가지고 스팬의 각을 원할 것 반작용을, 자식 주 키는 무시됩니다.

지도 외부로 이동하는 것은 당신이 줄 것이다 :

<span> 
    <Note key={note.id} /> 
    <Note key={note.id} /> 
    <Note key={note.id} /> 
</span>

을 그리고 각 주는 키가 같이 행복 할 것이다 반응한다.

은 다음을 시도해보십시오

return (
    <div className="container"> 
    <Navigation /> 
     <div className="app-items-container"> 
      <ReactCSSTransitionGroup {...transitionOptions}> 
      {this.state.notes.map((note) => { 
       return(
         <Note noteContent={note.noteContent} 
         noteId={note.id} 
         key={note.id} 
         removeNote={this.removeNote} /> 
        ) 
       }) 
       } 
      </ReactCSSTransitionGroup> 
     </div> 
    <Form addNote={this.addNote} /> 
    </div> 
);

출처

2017-12-26 21:42:58 bluesixty

감사를 생산 확신이 있는가, 그 일을!. 또한이 솔루션을 적용한 후 반응 검사기에서 내 노트 구성 요소를 올바른 전환으로 볼 수 있지만 원하는 효과가 작동하지 않는 것으로 나타났습니다. 문제는 CSS에있었습니다. – Micposso

굉장하고, 기쁘다. 전환 그룹은 까다로울 수있다. 정답으로 표시 할 수 있다면 다른 사람들이 이것이 좋은 해결책이라는 것을 알게 될 것입니다. 감사. – bluesixty

완료! 다시 한 번 감사드립니다. – Micposso

<ReactCSSTransitionGroup >에 고유 키를 추가해야 할 가능성이 가장 높습니다. 다음 사항을 시도해주세요.

또한 micpointso가 말한 것처럼 말이죠. 따라서 node.id가 실제로 항상 고유하다는 것을 확인할 수 있다면 좋을 것입니다.

출처

2017-12-26 21:28:32

ReactCSSTransitionGroup 고유 키 오류

답변

관련 문제