如何修复 validateDOMNesting(...): <td> 不能作为 <tbody> 的子项出现。并且列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我正在尝试修复这两个警告：

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

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

这是我的表 js 文件：

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

我试图走出去<tbody>，this.state.products.map(data=>但后来我又犯了一个错误

JSX expressions must have one parent element.

任何帮助或想法将不胜感激来解决这个问题。

非常感谢！祝你今天过得愉快

Answer 1

对于：Warning: validateDOMNesting(...): <td> cannot appear as a child of <tbody>.- 只需添加一行到您的<tbody>

IE

<tbody><tr><td></td></tr></tbody>

表格的正确 html 结构如下所示：

参考：https : //www.w3schools.com/tags/tag_tbody.asp

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

将您的映射从 : 更改this.state.products.map(data=>为：this.state.products.map((data, myKey)=> 然后<tbody>像这样使用此键：<tbody key={myKey}>

React 组件需要一个唯一的键。在早期版本中使用 map 生成子组件时，实现者必须设置它。最简单的方法是在你的孩子的根元素中使用 map 函数中的项目索引。

参考：https : //reactjs.org/docs/lists-and-keys.html

<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, myKey) =>
   <tbody key={myKey}>
     <tr>
      <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>
      </tr>
    </tbody>
  )}

</table>

有关更多信息：JSX expressions must have one parent element. 请参阅这篇文章： React - 表达式必须有一个父元素？