如何解决将条带js集成到react withnode中
我想使用react和node.js设置条纹签出。在节点终端中编译,但是当我检查localhost:3000页面时,会返回此错误消息
列表中的每个孩子都应该有一个唯一的“关键”道具。
检查Cart
的呈现方法。
- 在tr中(在cart / index.jsx:66处)
- 在购物车中(位于src / index.jsx:8)
<tbody>{
items.map(item => (
<tr>
<td>{item.name}</td>
<td>
<img
src={`/images/${item.apiId}.jpg`}
alt={item.name}
width={180}
/>
</td>
<td>{item.quantity}</td>
<td>{formatPrice(item.price)}</td>
</tr>)
)}
<tr>
import React from 'react'
import ReactDOM from 'react-dom'
import Cart from "./components/cart/"
ReactDOM.render(
<Cart stripeToken = "test-token" />,document.getElementById("root")
)
解决方法
每次渲染元素列表时,都需要向每个元素添加一个key
属性,以便在组件的状态或属性发生变化时,React可以跟踪要重新渲染的元素。对于您的情况,要解决该警告消息,您可以添加key
属性,该属性对于每个表行都是唯一的。例如:
<tbody>
{items.map((item) => (
<tr key={item.apiId}> // Makes the warning go away
<td>{item.name}</td>
<td>
<img
src={`/images/${item.apiId}.jpg`}
alt={item.name}
width={180}
/>
</td>
<td>{item.quantity}</td>
<td>{formatPrice(item.price)}</td>
</tr>
))}
</tbody>
在这种情况下,我假设item.apiId
对于项数组中的每个元素都是唯一的,所以使用apiId
作为键。将数组中的项目索引用作唯一键在某种程度上很常见,但是如果元素的顺序发生变化,这种方法很快就会崩溃。
您可以在此处了解有关该关键道具的更多信息以及为什么需要它:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。