React onClick计数器功能异常求助：多商品独立计数问题与状态提升可行性咨询

你遇到的核心问题确实是状态作用域的问题——当前每个Card组件都维护着自己独立的CartCounter状态，所以点击"Add To Cart"时，只会更新当前组件内的计数器，各个商品的计数完全分离，这也是你看到每个商品都输出独立日志的原因。

解决这个问题的关键就是你猜想的状态提升（Lift State Up），把购物车的状态统一放到父组件中管理，让所有子组件共享同一状态源。下面是具体的修改步骤：

1. 在最顶层的Products组件中维护购物车状态 #

我们用一个对象来存储每个商品的购买数量（键为商品ID，值为对应数量），同时编写统一的添加购物车逻辑：

import { useEffect, useState } from "react";
import ProductList from "./ProductList";
const Products = () => {
  const [products, setProducts] = useState(null);
  // 统一管理购物车状态：key是商品id，value是购买数量
  const [cart, setCart] = useState({});

  // 处理添加购物车的通用函数
  const handleAddToCart = (productId) => {
    setCart(prevCart => {
      return {
        ...prevCart,
        // 如果商品已在购物车，数量+1；否则初始化为1
        [productId]: (prevCart[productId] || 0) + 1
      };
    });
    // 这里可以打印统一的购物车状态日志
    console.log('当前购物车状态:', cart);
  };

  useEffect(() => {
    fetch('http://localhost:8000/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div className="ProductList">
      {/* 把购物车状态和操作函数传递给子组件 */}
      {products && <ProductList products={products} cart={cart} handleAddToCart={handleAddToCart} />}
    </div>
  );
}
export default Products;

2. 修改ProductList组件，传递状态和操作函数到Card #

这个组件只需要把父组件传来的参数转发给每个Card即可：

import Card from "./Card";
const ProductList = (props) => {
  const { products, cart, handleAddToCart } = props;
  return (
    <div className="ProductList" >
      {products.map((product) => (
        <Card 
          product={product} 
          key={product.id} 
          // 传递当前商品在购物车中的数量（默认0）
          quantity={cart[product.id] || 0}
          // 传递绑定了当前商品ID的添加函数
          onAddToCart={() => handleAddToCart(product.id)}
        />
      ))}
    </div>
  );
}
export default ProductList;

3. 修改Card组件，移除独立状态，使用父组件传递的参数 #

现在Card不需要自己维护计数器了，只负责展示和触发操作：

import { useState } from "react";
const Card= ({ product, quantity, onAddToCart }) => {
  const [showDescription, setShowDescription] = useState(false);

  return (
    <div className="Product-Preview" >
      <div className="backdrop" style={{ backgroundImage: `url(${product.image})` }}></div>
      <h2>{product.title}</h2>
      <div>{product.price}</div>
      <button className="ShowDescription" onClick={() => setShowDescription(!showDescription)}>Details</button>
      {/* 显示当前商品的购物车数量，并调用父组件的添加函数 */}
      <button className="AddToCart" onClick={onAddToCart}>Add To Cart ({quantity})</button>
      {showDescription && <p>{product.description}</p>}
      <br />
    </div>
  );
};
export default Card;

为什么这样能解决问题？ #

• 购物车状态被统一放在最顶层的Products组件中，所有Card共享同一状态源，不会再出现各自独立的计数。
• 所有添加操作都会触发父组件的状态更新，再通过props传递给子组件，保证了状态的一致性。
• 如果后续需要展示购物车总数量，只需要在Products组件中计算：const totalItems = Object.values(cart).reduce((sum, num) => sum + num, 0)，再传递给需要的组件即可。

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