使用数组数据中的键识别每个项目以添加购物车按钮。 Reactjs. Redux

Question

I have a display of products with each name, price and button(add to cart).

The problem is the first data(hoodie white) from my array of products (store component)is the only one that adds up. I can't find a way to identify each array of products when using my handler for dispatch.

Array products sample

const data = {
    products:[
        {   
            id: 1,
            name: 'Hoodie white',
            price: 19.99,

        },
        {
            id: 2,
            name: 'Hoodie black',
            price: 19.99,
        }
    ],

    cart: [],
    total: 0,
}

const ProductComponent=()=>{

    const products= useSelector(state=>state.products);
    const dispatch = useDispatch(0);
    const [productid] = useState(0)
    const purchaseHandler=(e)=>{ 
        dispatch({ type: "PURCHASE", payLoad: products[productid] });
    }
    return(
             products.map((product, i)=>{
            return(
            <>
            <img src={products.image} className="product-image" alt={product.name} />
            <div className='namebtn'>
            <h3 className='product-name-text' key={i}>{product.name}</h3>
            <div key={i}>${product.price}</div>
            <button onClick={purchaseHandler} className="addToCart">Add to Cart</button>
            </div>
            </>
        )})    
    )
    }

Answer 1

Why not pass the product.id to purchaseHandler function

const ProductComponent = () => {
  const products = useSelector((state) => state.products);
  const dispatch = useDispatch(0);
  const purchaseHandler = (e, productid) => {
    dispatch({ type: 'PURCHASE', payLoad: products[productid] });
  };
  return products.map((product, i) => {
    return (
      <>
        <img src={products.image} className="product-image" alt={product.name} />
        <div className="namebtn">
          <h3 className="product-name-text" key={i}>
            {product.name}
          </h3>
          <div key={i}>${product.price}</div>
          <button onClick={(e) => purchaseHandler(e, product.id)} className="addToCart">
            Add to Cart
          </button>
        </div>
      </>
    );
  });
};