React OnClick iteration

Question

我想做一个onClick计数器，但我有一个计数器迭代正确的问题。在应用程序中有3个"产品"。点击"添加到目录"后按钮，对象的状态被更新，但所有产品都是单独生成的。我认为这导致了每个产品的计数器不同的问题，或者如果我提升状态，一切都会正常工作，但是console.log只是为所有产品新生成的。我不太确定，所以我需要帮助。
下面是一些代码，顺序是从父到最后一个子:

import { useEffect, useState } from "react";
import ProductList from "./ProductList";
const Products = () => {
const [products, setProducts] = useState (null);
useEffect (() => {
fetch('http://localhost:8000/products')
.then(res => {
return res.json();
})
.then(data => {
setProducts(data);
})
}, []);

return ( 
<div className="ProductList">
{products && <ProductList products={products}/>}
</div>
);
}
export default Products;

import Card from "./Card";
const ProductList = (props) => {
const products = props.products;

return ( 
<div className="ProductList" >
{products.map((product) => (
<Card product={product} key={product.id} />))}
</div>
);
}
export default ProductList;

import { useState } from "react";
const Card= ({ product }) => {
const [showDescription, setShowDescription] = useState(false);
const [CartCounter, setCartCounter ] = useState(0);
console.log(CartCounter);
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={() => setCartCounter(CartCounter + 1)}>Add To Cart </button> 
{showDescription && <p>{product.description}</p>}
<br />
</div>
);
};
export default Card;

Answer 1

好的，您想要跟踪聚合值。我将列出一些高级别的代码。

const ProductList = () => {
const [count, setCount] = useState(0)
const addOrRemove = n => { setCount(v => v + n) }
return products.map(p => <Card addOrRemove={addOrRemove} />)
}
const Card = ({ addOrRemove }) => {
// optional if you want to track card count
// const [count, setCount] = useState(0)

return (
<>
<button onClick={() => { addOrRemove(1) }>Add</button>
<button onClick={() => { addOrRemove(-1) }>Remove</button>
</>
)
}

基本上无论你是否跟踪本地计数，你都需要让父进程来决定最终计数是多少，否则在子进程和父进程之间会出现一些不同步的问题。