Javascript 在react withnode中集成stripe js

我想使用react和node.js设置条带签出。在节点终端中编译，但当我检查localhost:3000页面时，返回此错误消息

列表中的每个孩子都应该有一个唯一的“键”道具

检查

Cart

的渲染方法

在tr中（在cart/index.jsx:66处）

在购物车中（位于src/index.jsx:8）

{
items.map（item=>(
{item.name}
{item.quantity}
{formatPrice（item.price）}
)
)}

从“React”导入React
从“react dom”导入react dom
从“/components/Cart/”导入购物车
ReactDOM.render(
,
document.getElementById（“根”）
)   

无论何时渲染元素列表，都需要为每个元素添加一个

键

道具，以便React可以跟踪在组件的状态或道具发生变化时要重新渲染的元素。在您的情况下，要修复该警告消息，您需要添加

键

属性，该属性的值对于每个表行都是唯一的。例如：

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

{items.map（（item）=>(
//使警告消失
{item.name}
{item.quantity}
{formatPrice（item.price）}
))}

在本例中，我使用

item.apid

作为键，假设

apid

对于items数组中的每个元素都是唯一的。数组中的项索引被用作唯一键有点常见，但如果元素的顺序发生变化，这种方法很快就会崩溃

您可以阅读更多关于钥匙道具的信息，以及为什么需要钥匙道具：

---

这样做了，警告消失了，但现在它显示：v3:1未捕获集成错误：无效条带。重定向到checkout参数：很高兴听到第一个问题已解决！我建议为新的错误打开第二个问题，因为它似乎不相关。

import React from 'react'
import ReactDOM from 'react-dom'

import Cart from "./components/cart/"


ReactDOM.render(
    <Cart stripeToken = "test-token" />,
    document.getElementById("root")
)   

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