问如何修复validateDOMNesting(...)：<td>不能作为<tbody>的子级出现。列表中的每个子元素都应该有一个唯一的"key“道具

EN

Warning: validateDOMNesting(...): <td> cannot appear as a child of <tbody>.

Warning: Each child in a list should have a unique "key" prop.

        <table className="table table-hover">

  <thead>

    <tr>
      <th scope="col"style={{width: "10%"}}>ID</th>
      <th scope="col"style={{width: "10%"}}>Name</th>
      <th scope="col"style={{width: "10%"}}>Price $</th>
      <th scope="col" style={{width: "10%"}}>Quantity</th>
      <th scope="col" style={{width: "10%"}}>Total $:</th>
      <th scope="col" style={{width: "10%"}}>Total €:</th>
      <th scope="col" style={{width: "20%"}}>Remove:</th>
      <th scope="col" style={{width: "20%"}}>Change Quantity:</th>
    </tr>
  </thead>

  {this.state.products.map(data=>
   <tbody>
      <td>{data.id}</td>



      <td>{data.name}</td>


      <td>{data.price}</td>


      <td>{data.quantity}</td>


      <td>{data.quantity*data.price}</td>
      <td>{Math.round(data.quantity*data.price*0.92)}</td>
      <td>
      <button type="button" onClick={(e)=>this.handleSubmitRemove(data.id)} className="btn btn-danger">Remove</button>
      </td>

      <td>
       <button  style={{margin: "3px"}}  type="button" onClick={(e)=> this.updateCart(data.id,1)}>+</button>
       <button  style={{margin: "3px"}} disabled={data.quantity==1} type="button" onClick={(e)=> this.updateCart(data.id,-1)}>-</button>
      </td>

      </tbody>
  )}

</table>

JSX expressions must have one parent element.