マップ内のユニークキーの反応警告を取り除くことができませんでした。

Question

以下のコードで何が問題になっていますか？私はkey = {obj._id}を持っていましたが、私は警告が表示されないと思っていますが、まだそれを取得しています。

警告：配列またはイテレータの各子には、固有の「キー」 propが必要です。 ..

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"を適用する必要があります。

このお試しください：最初の質問は、当然のことながら、 "あなたは_idフィールドが一意であることを確認している？" です

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>)