React电商项目Local Storage数量持久化问题：刷新仅首个产品生效

你现在的问题是所有产品的Quantity组件都共用同一个localStorage键"quantity"——不管操作哪个产品，都会把数量值覆盖到同一个键里。刷新页面时，所有组件都会读取这个相同的键，自然只会显示最后一次操作的那个值（你看到的“首个产品更新”其实是所有产品都用了同一个存储值）。

1. 给组件添加产品唯一标识：每个产品需要一个专属的productId（比如产品ID、SKU），作为props传给Quantity组件，用来区分不同产品的存储项。
2. 修改localStorage键名：存储和读取时，使用quantity-${productId}作为键，确保每个产品的数量存在独立的存储位置。
3. 修正数量增减的逻辑问题：原代码里的库存判断有异步更新的bug，因为setQuantity是异步操作，判断时拿的是旧值，需要调整判断时机。
4. 同步父子组件状态：确保父组件的counter和子组件的quantity保持一致，避免状态混乱。

import React, { useState, useEffect } from "react";

function Quantity({
  counter,
  setCounter,
  inventory,
  handleCounterDecrease,
  handleCounterIncrease,
  productId // 新增：产品唯一标识
}) {
  const [quantity, setQuantity] = useState(0);
  const [inventoryWarning, setInventoryWarning] = useState("");

  function increaseQuantity() {
    const newQuantity = quantity + 1;
    // 先判断库存，再更新状态
    if (newQuantity > inventory) {
      setInventoryWarning("Quantity exceeds stock levels.");
      return;
    }
    setInventoryWarning("");
    setQuantity(newQuantity);
    handleCounterIncrease();
    setCounter(newQuantity);
  }

  function decreaseQuantity() {
    const newQuantity = quantity - 1;
    if (newQuantity < 0) {
      setQuantity(0);
      setCounter(0);
      return;
    }
    setInventoryWarning("");
    setQuantity(newQuantity);
    handleCounterDecrease();
    setCounter(newQuantity);
  }

  useEffect(() => {
    // 读取当前产品对应的存储值
    const data = JSON.parse(localStorage.getItem(`quantity-${productId}`));
    if (data !== null) { // 区分未存储的null和合法的0值
      setQuantity(data);
      setCounter(data); // 同步父组件counter状态
    }
  }, [productId]);

  useEffect(() => {
    // 存储当前产品的数量
    localStorage.setItem(`quantity-${productId}`, JSON.stringify(quantity));
  }, [quantity, productId]);

  return (
    <div>
      <div className="cart-quantity-container">
        <i onClick={decreaseQuantity} className="minus square icon"></i> {/* 修正React要求的className */}
        <span>Quantity: {quantity}</span>
        <i onClick={increaseQuantity} className="plus square icon"></i> {/* 修正React要求的className */}
        <p>{inventoryWarning}</p>
      </div>
    </div>
  );
}

export default Quantity;

在父组件渲染Quantity时，必须传入每个产品的唯一productId，示例如下：

{products.map(product => (
  <div key={product.id}>
    <h3>{product.name}</h3>
    <Quantity
      counter={product.quantity}
      setCounter={(newQty) => updateProductQuantity(product.id, newQty)} // 父组件更新数量的方法
      inventory={product.inventory}
      handleCounterIncrease={() => { /* 原有逻辑或整合到setCounter中 */ }}
      handleCounterDecrease={() => { /* 原有逻辑或整合到setCounter中 */ }}
      productId={product.id} // 传入产品唯一ID
    />
  </div>
))}

• 原代码里的class属性要改成className，这是React的语法要求，否则会出现警告。
• 库存判断调整为先计算新数量再判断，避免异步更新导致的错误判断逻辑。
• 读取localStorage时判断data !== null，因为未存储过的键会返回null，而0是合法的数量值。

内容的提问来源于stack exchange，提问作者rolsal