javascript - 如何修复 validateDOMNesting(...) : <td> cannot appear as a child of <tbody>. 和列表中的每个 child 都应该有一个唯一的 "key" Prop

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.
更改您的 map :this.state.products.map(data=>至:this.state.products.map((data, myKey)=>然后在您的 <tbody> 中使用此 key 像这样:<tbody key={myKey}>
React 组件需要一个唯一的键。在早期版本中使用 map 生成子组件时，实现者必须设置此项。最简单的方法是在您 child 的根元素中使用 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 - expressions must have one parent element?