ReactJS Hooks 中的关键参数问题，在单独使用（加/减）时更新所有产品项

Question

在 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

Answer 1

您正在应用于key={index}渲染中的多个元素（<div>和<ul>each&nbsp;<Button />），但它只需要在数组中呈现的顶级元素上进行，在您的情况下是<div className="products">.顺便说一句，数组索引通常不是键的好候选 - 它应该对正在呈现的每个项目都是唯一的。在您的示例中，我认为producNumber这是最好的选择，因为我假设它是每个产品的唯一标识符。key={index}从你拥有的所有东西中删除添加key={producNumber}到内部<div className="products">这是一个很好的资源来了解更多关于 React 的keyprop。每个产品的数量相同的原因是您的州只有一个数字：React.useState(0);您正在尝试跟踪每个产品的数量，因此您需要每个产品的数量。您可以做到这一点的一种方法是使用一个对象 (&nbsp;{})，该对象 ( ) 具有您的属性producNum和数量的属性作为它们的值。例如：const products = [&nbsp; { name: "thing", num: 152 },&nbsp; { name: "other-thing", num: 254 },];const initialQuantities = products.reduce(&nbsp; (quantities, product) => ({ ...quantities, [product.num]: 0 }),&nbsp; {});console.log(initialQuantities);这将使用初始数量为 0 的每个产品创建对象。然后当您增加或减少数量时，您会将您单击的产品的产品编号传递给函数，然后您可以设置该产品的新数量，而使用Spread语法（. ..)：const initialQuantities = products.reduce(&nbsp; (quantities, product) => ({ ...quantities, [product.producNumber]: 0 }),&nbsp; {});const [quantities, setQuantities] = React.useState(initialQuantities);const increase = (productNum) => {&nbsp; setQuantities({&nbsp; &nbsp; ...quantities,&nbsp; &nbsp; [productNum]: quantities[productNum] + 1,&nbsp; });};const decrease = (productNum) => {&nbsp; setQuantities({&nbsp; &nbsp; ...quantities,&nbsp; &nbsp; [productNum]: Math.max(0, quantities[productNum] - 1),&nbsp; });};然后你onClick会变成：onClick={() => increase(producNumber)}和onClick={() => decrease(producNumber)}在这里可以看到一个简单的实现：https ://codesandbox.io/s/icy-dust-nbetq?file=/src/App.js:175-655