将条带js集成到react withnode中

Question

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

Answer 1

任何时候渲染元素列表时，都需要为每个元素添加一个key prop，以便 React 可以跟踪在组件的 state 或 props 发生变化时要重新渲染的元素。 在您的情况下，要修复该警告消息，您将添加key prop，其值对每个表行都是唯一的。 例如：

        <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 道具的更多信息以及为什么需要它：

• https://reactjs.org/docs/lists-and-keys.html
• https://kentcdodds.com/blog/understanding-reacts-key-prop