將條帶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