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 <Button />），但它只需要在数组中呈现的顶级元素上进行，在您的情况下是<div className="products">.

顺便说一句，数组索引通常不是键的好候选 - 它应该对正在呈现的每个项目都是唯一的。在您的示例中，我认为producNumber这是最好的选择，因为我假设它是每个产品的唯一标识符。

• key={index}从你拥有的所有东西中删除

• 添加key={producNumber}到内部<div className="products">

这是一个很好的资源来了解更多关于 React 的keyprop。

---

每个产品的数量相同的原因是您的州只有一个数字：

React.useState(0);

您正在尝试跟踪每个产品的数量，因此您需要每个产品的数量。您可以做到这一点的一种方法是使用一个对象 ( {})，该对象 ( ) 具有您的属性producNum和数量的属性作为它们的值。例如：

const products = [

  { name: "thing", num: 152 },

  { name: "other-thing", num: 254 },

];

const initialQuantities = products.reduce(

  (quantities, product) => ({ ...quantities, [product.num]: 0 }),

  {}

);

console.log(initialQuantities);

这将使用初始数量为 0 的每个产品创建对象。

然后当您增加或减少数量时，您会将您单击的产品的产品编号传递给函数，然后您可以设置该产品的新数量，而使用Spread语法（. ..)：

const initialQuantities = products.reduce(

  (quantities, product) => ({ ...quantities, [product.producNumber]: 0 }),

  {}

);

const [quantities, setQuantities] = React.useState(initialQuantities);

const increase = (productNum) => {

  setQuantities({

    ...quantities,

    [productNum]: quantities[productNum] + 1,

  });

};

const decrease = (productNum) => {

  setQuantities({

    ...quantities,

    [productNum]: Math.max(0, quantities[productNum] - 1),

  });

};

然后你onClick会变成：

onClick={() => increase(producNumber)}

和

onClick={() => decrease(producNumber)}

在这里可以看到一个简单的实现：https ://codesandbox.io/s/icy-dust-nbetq?file=/src/App.js:175-655