时间戳

首页 > 解决方案 > 反应 OnClick 迭代

javascript - 反应 OnClick 迭代

问题描述

我想做一个 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;

标签： javascriptreactjs

解决方案

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

  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>
      </>
    )
  }

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

推荐阅读