React Native本地购物车代码疑问：重复商品数量更新逻辑是否正确？

First, let's break down the key issues in your current code that are preventing the existing item count increment from working as expected:

Key Problems #

• Unconditional duplicate item addition: After attempting to update an existing item, your code always proceeds to add a new entry for the product. This means even if you find and increment the count of an existing item, you're still creating a duplicate instead of just updating the count.
• Incorrect array manipulation: Using val.pop(element) is a mistake—pop() removes the last element of the array, not the specific item you're targeting. This corrupts your cart array instead of modifying the correct entry.
• Async operations without await: Inside the some() callback, you call AsyncStorage methods without awaiting them. Since some() is synchronous, this leads to race conditions where storage operations might not complete before the code moves on, resulting in inconsistent cart state.
• Redundant storage operations: Removing the cart item when initializing (since val is null, the item doesn't exist anyway) and re-fetching the cart after modifying it are unnecessary steps that can cause unexpected behavior.
• Property name mismatch: Your intended data structure uses prodId and count, but your code checks element.ProductID and uses counter. If your props pass prodId instead of ProductID, the matching logic will fail entirely.

Corrected Implementation #

Here's a revised version of your btnPressed method that fixes all these issues, with proper async handling and clean logic:

async btnPressed() {
  try {
    // Get current cart from storage (initialize empty array if none exists)
    const storedCart = await AsyncStorage.getItem("obj");
    let cart = storedCart ? JSON.parse(storedCart) : [];

    // Check if the product already exists in the cart
    const existingItemIndex = cart.findIndex(
      item => item.prodId === this.props.obj.prodId // Use consistent property names
    );

    if (existingItemIndex !== -1) {
      // Increment count of the existing item
      cart[existingItemIndex].count += 1;
      ToastAndroid.showWithGravity(
        "Product quantity updated!",
        ToastAndroid.SHORT,
        ToastAndroid.CENTER
      );
    } else {
      // Add new product to cart with count 1
      cart.push({
        ...this.props.obj,
        count: 1 // Ensure count is included with the correct property name
      });
      ToastAndroid.showWithGravity(
        "Product added to cart!",
        ToastAndroid.SHORT,
        ToastAndroid.CENTER
      );
    }

    // Save the updated cart back to storage
    await AsyncStorage.setItem("obj", JSON.stringify(cart));
  } catch (error) {
    // Handle any storage errors gracefully
    console.error("Error updating cart:", error);
    ToastAndroid.showWithGravity(
      "Failed to update cart!",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  }
}

Key Improvements #

• Consistent property names: Uses prodId and count to match your intended data structure (adjust if your actual props use different keys, but keep them consistent across all code).
• Proper async handling: All AsyncStorage operations are awaited, and we wrap everything in a try/catch block to handle errors like storage limits or platform-specific issues.
• Efficient item lookup: Uses findIndex to directly locate the existing item, avoiding unnecessary array manipulation.
• No redundant operations: We only fetch the cart once, modify it in memory, then save it back once—no unnecessary remove/set cycles.
• Clear conditional logic: Only adds a new item if it doesn't already exist; otherwise, increments the count.
• Better UX feedback: Differentiates toast messages to let users know if they added a new item or updated an existing one's quantity.

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