时间戳

首页 > 解决方案 > 将条带js集成到react withnode中

javascript - 将条带js集成到react withnode中

问题描述

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

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

检查Cart.

  1. 在 tr 中（在 cart/index.jsx:66）
  2. 在购物车中（在 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")
)

标签： javascriptreactjsstripe-payments

解决方案

每次渲染元素列表时，都需要为key每个元素添加一个 prop，以便 React 可以跟踪在组件的状态或 props 发生变化时要重新渲染的元素。在您的情况下，要修复该警告消息，您将添加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' 对 items 数组中的每个元素都是唯一的。将数组中的项目索引用作唯一键有点常见，但如果元素的顺序发生变化，这种方法很快就会崩溃。

您可以在此处阅读有关 key 道具的更多信息以及为什么需要它：

推荐阅读