Javascript 如何修复ValidatedMonitoring（…）：<；td>；不能显示为<；的子级；t车身>；。列表中的每个孩子都应该有一个唯一的；“关键”；道具

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

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

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

如果您有任何帮助或想法来解决此问题，我们将不胜感激

非常感谢你！

---

祝您度过愉快的一天。

警告：validateDOMNesting（…）：不能显示为的子项。

-只需在您的

中添加一行。

i、 e

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

参考：

对于：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。

将映射从：

this.state.products.map（数据=>

更改为：

this.state.products.map（（数据，myKey）=>

然后在

中使用此键，如下所示：

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

参考：

身份证件
名称
价格$
量
总额$：
总额€：
删除：
更改数量：
{this.state.products.map（（数据，myKey）=>
{data.id}
{data.name}
{data.price}
{data.quantity}
{data.quantity*data.price}
{Math.round（data.quantity*data.price*0.92）}
this.handleSubmitRemove（data.id）}className=“btn btn danger”>删除
this.updateCart（data.id，1）}>+
this.updateCart（data.id，-1）}>-
)}

有关此操作的详细信息：

JSX表达式必须有一个父元素。

见此帖：

---

我遇到了一个错误，上面说：

如何修复validateDOMNesting（…）：不能显示为的子级。并且列表中的每个子级都应具有唯一的“key”属性

我终于发现我在

标记之后缺少了

。因此，请检查您的

标记，并查看您的其他

标记是否包含在

标记中。最后，您的代码应该如下所示：

<thead>
<tr>
<th>
//other content here like <td>
</th>
</tr>
</thead>

//这里的其他内容如

RE:

警告：validateDOMNesting（…）：不能显示为的子项。

-只需在

中添加一行，即

RE:

警告：列表中的每个子项都应具有唯一的“key”属性。

更改映射从：

this.state.products.map（数据=>

到this.state.products.map（（数据，myKey）=>`然后在您的

中使用此键，如下所示：

是的，它正在工作。请您解释一下，并将其作为答案发布，以备将来使用。谢谢您很高兴它工作了-我在下面发布了一个答案-以及一些参考资料。如果您需要更多信息，请告诉我

JSX expressions must have one parent element.

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

<thead>
<tr>
<th>
//other content here like <td>
</th>
</tr>
</thead>