지도를 사용할 때의 반향 오류

Question

내 반응 요소에서 맵을 사용하여 목록을 반복합니다. 지도 루프 내부에 링크가 하나있을 때 제대로 작동하지만 최적화 된 빌드를 만들 때 두 번째 링크에서 오류가 발생합니다. Intellij는 내 <a it expects either a ',' or a ')' 이후에 오류 메시지를 표시합니다. 나는 브래킷이나 무엇이든 놓친 것을 볼 수 없다.

{this.state.players.map(singlePlayer => 
     <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
     <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a> 
            )} 

Answer 1

map은 하나의 요소 만 반환해야합니다. 당신도 div 또는 li하여 Link 및 a을 포장 할 수 있도록 그래서 코드가

{this.state.players.map(singlePlayer => 
    <div><Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
    <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a></div> 
           )} 

Answer 2

문제가되어야합니다, 당신은 map 내부에 하나 개 이상의 항목을 반환하는 경우, 두 개 이상의 요소를 반환 할 수 없습니다 또는 임의의 다른 요소에 의해 수행 될 수있다. 이것을 시도하십시오 :

{this.state.players.map(singlePlayer => 
    <div> 
     <Link to={'edit-player/' + singlePlayer.id}><li key={singlePlayer.id}>{singlePlayer.name}</li></Link> 
     <a id={singlePlayer.id} onClick={this.handleDelete.bind(this)}>delete</a> 
    </div> 
)}