将条带js集成到react withnode中

编程问答 2022-08-17

问题描述

我想使用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")
)

解决方法

每次渲染元素列表时，都需要向每个元素添加一个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作为键。将数组中的项目索引用作唯一键在某种程度上很常见，但是如果元素的顺序发生变化，这种方法很快就会崩溃。

您可以在此处了解有关该关键道具的更多信息以及为什么需要它：

javascriptreactjsreactjsstripe-payments