매핑 경고시 고유 키 반응

Question

반응이 매우 새로워서 해결할 수없는 문제가 있습니다.

경고 : 고유의 "키" 소품을 가져야한다 배열이나 반복자의 각 자녀

import React from 'react'; 
import Header from './Header'; 
import ContestPreview from './ContestPreview'; 

class App extends React.Component { 

    state = { 
     pageHeader: 'Naming Contests', 
     whatever: 'test' 
    }; 

    render() { 
     return (
      <div className="App"> 
       <Header message={this.state.pageHeader} /> 
       <div> 
        {this.props.contests.map(contest => 
         <ContestPreview key={contest.id} {...contest} /> 
        )} 
       </div> 
      </div> 
     ); 
    } 
} 

export default App; 

이 코드는 나에게 다음과 같은 경고를 제공합니다 : 여기 내 구성 요소를 반응이다. App의 렌더링 방법을 확인하십시오. 자세한 내용은 여기 - FB-URL-I-REMOVED를 참조하십시오. 앱

에서 (응용 프로그램에 의해 생성) ContestPreview 에 나는 완전히이 오류가 무엇을 의미하는지 이해합니다. 나는 물음표를 반복 할 때 배열의 각 요소가 고유 한 키를 가져야한다는 것을 알고 있습니다. 왜 내가 이해하지 못하는 이유는 내 opionion에서 열쇠가 내 <ContestPreview key={contest.id} {...contest} /> ...로 정의되어야하기 때문에 오류가 발생했습니다 ... key={contest.id} 충분하지 않습니까? 내 opionion에서

{ 
    "contests": [ 
    { 
     "id": 1, 
     "categoryName": "Business/Company", 
     "contestName": "Cognitive Building Bricks" 
    }, 
    { 
     "id": 2, 
     "categoryName": "Magazine/Newsletter", 
     "contestName": "Educating people about sustainable food production" 
    }, 
    { 
     "id": 3, 
     "categoryName": "Software Component", 
     "contestName": "Big Data Analytics for Cash Circulation" 
    }, 
    { 
     "id": 4, 
     "categoryName": "Website", 
     "contestName": "Free programming books" 
    } 
    ] 
} 

그것이 작동해야 난 아직도이 오류가 왜 이해할 수 없다 :

여기 내 경연 데이터입니다. 나는 정말로 내 문제에 대한 도움을 얻고 싶다. 나는 그것이 실제로 어떻게 작동하는지 이해하려고하기 때문에 누군가가 나에게 설명 할 수 있다면 정말 멋질 것이다.

도움 주셔서 감사합니다. :) 여기에 코드

<div className="App"> 
    <Header message={this.state.pageHeader} /> 
    <div> 
     {this.props.contests.map(contest => { 
      console.log('contest id =', contest.id); 
      return (<ContestPreview key={contest.id} {...contest} />); 
     })} 
    </div> 
</div> 

이것은 당신이 당신의지도에 렌더링되는 각 구성 요소의 ID (키) 콘솔됩니다에서

Answer 1

. 나는 당신의 객체 배열에서 어떤 이유로 당신은 같은 키를 가진 객체를 가지고 있다고 생각합니다.

이렇게하면 console.log() 결과가 표시됩니다. 개체에서 오류가있는 위치를 알 수 있습니다.

오류 디버깅에 도움이되기를 바랍니다.

Answer 2

각 개체의 속성을 렌더링하는 래퍼를 넣습니다.

<div> 
    {this.props.contests.map(contest => 
     <div key={contest.id}> 
      <ContestPreview {...contest} /> 
     </div> 
    )} 
</div> 

Answer 3

나는 두 가지 해결 방법을 생각할 수 ...

첫 번째 방법은 ContestPreview 요소에 직접 주변 DIV에 키를 추가하는 대신하는 것입니다.

<div> 
    {this.props.contests.map(contest => 
    <div key={contest.id}><ContestPreview {...contest} /></div> 
)} 
</div> 

두 번째 방법은 실제로 key 소품을 사용하도록 ContestPreview을 수정하는 것입니다.

render(){ 
    <div key={this.props.key}> 
    ... 
    </div> 
}