在 ReactJS 中將 key 參數應用于以下代碼時，我有點困惑，我知道我們需要使用 key 參數來唯一標識每個 DOM 元素，當我嘗試在按鈕中使用 key={index} 時出現錯誤（遇到兩個孩子用同一個鑰匙）。這里我也有點疑惑，因為更新setQuantity所有產品中的所有項目（如下圖所示），不知道如何使用唯一的關鍵項目來僅更新每個產品數量。任何幫助表示贊賞。更新 1：代碼現在更新為 key={productName}，但在添加/減去單個產品時，所有產品的加/減值仍在更新function Home({ props }) {  //quantitiyselected, to set the no. of items purchased  const [quantitiyselected, setQuantity] = useState(0);  // below function to add, subtract quantity  let selectquantity = (e) => {    if (e.currentTarget.name == "add") {      let i = quantitiyselected + 1;      setQuantity(i);    } else if (e.currentTarget.name == "subtract" && quantitiyselected > 0) {      let z = quantitiyselected - 1;      setQuantity(z);    } else;  };  return (    <div className="products">      {props.map((eachproduct, index) => {        let productName = eachproduct.product_name;        let producNumber = eachproduct.producNumber;        let price = eachproduct.price;        let desc = eachproduct.productDescription;        let photo = eachproduct.image_URL;        let stockQuantity = eachproduct.stockQuantity;        return (          <div className="products" key={productName }>            <ul>              <li>                <img className="products-image" src={photo} />              </li>              <li>{productName} </li>              <li>                Item No:{producNumber}(InStock:{stockQuantity})              </li>              <li>price:{price}￡ </li>              <li>{desc}</li>              <li>                <ButtonGroup aria-label="quantityofproduct">                  <Button                                        variant="secondary"                    name="subtract"                    value="subtract"                    onClick={selectquantity}                  >                    -                  </Button>                  <Button variant="secondary">                    {quantitiyselected}                  </Button>                  <Button