지도에서 고유 키의 반응 경고를 제거 할 수 없습니다.

Question

아래 코드에 어떤 문제가 있습니까? 나는 key = {obj._id}를 가지고 있었고 나는 경고를 보지 않을 것이라고 기대하지만 나는 여전히 그것을 얻고있다.

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

renderListItems(items){ 
     return(
      <div> 
      {map(items, obj => 
       <div key={obj._id} className="panel-body panel-row"> 
        <div className="row"> 
         <div className="col-md-12"> 
          <h2 className="title">{obj.display_name}</h2> 
          <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p> 
          <div className="actions_wrap"> 
           <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link> 
           <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      )} 
      </div> 
     ) 
    } 

Answer 1

를 렌더링 방법을 확인 당신이 잘못 몇 가지 코딩 생각합니다. 배열에 함수 "map"을 적용해야합니다.

이 시도 :

renderListItems(items){ 
     return(
      <div> 
      {items.map(obj => 
       <div key={obj._id} className="panel-body panel-row"> 
        <div className="row"> 
         <div className="col-md-12"> 
          <h2 className="title">{obj.display_name}</h2> 
          <p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p> 
          <div className="actions_wrap"> 
           <Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link> 
           <a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a> 
          </div> 
         </div> 
        </div> 
       </div> 
      )} 
      </div> 
     ) 
    } 

Answer 2

items.map((obj, i) => <div key={i}></div>)