React商品卡片：实现数量归零后隐藏计数器并恢复显示ADD按钮

要实现「计数器归零时隐藏并重新显示ADD按钮」的效果，只需对现有代码做两处核心修改，以下是具体实现：

修改后的完整代码 #

const Card = (product) => {
    const [isActive, setIsActive] = useState(true);
    const [quantity, setQuantity] = useState(1);

    const handleDecrement = () => {
        if (quantity > 0) {
            const newQty = quantity - 1;
            setQuantity(newQty);
            // 数量归零时切换回ADD按钮
            if (newQty === 0) {
                setIsActive(true);
            }
        }
    };

    const handleIncrement = () => {
        if (quantity < 10) {
            setQuantity((prevCount) => prevCount + 1);
        }
    };

    return (
        <>
            <div className="card">
                <div className="product-details">
                    <div className="img-container">
                        <img src={product.img} alt={product.title} />
                    </div>
                    <div className="data-container">
                        <div className="title">{product.title}</div>
                        <div className="subheading">{product.subheading}</div>
                        <div className="price">{product.price}</div>
                    </div>
                </div>
                <div className="button">
                    {/* 显示ADD按钮，点击时重置数量为1并切换状态 */}
                    {isActive && (
                        <button onClick={() => {
                            setIsActive(false);
                            setQuantity(1);
                        }}>ADD</button>
                    )}
                    {/* 显示计数器组件 */}
                    {!isActive && (
                        <div className="inc">
                            <span onClick={handleDecrement}>-</span>
                            <span> {quantity} </span>
                            <span onClick={handleIncrement}>+</span>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

关键修改说明 #

1. 在递减函数中判断数量状态
   当执行handleDecrement时，计算出递减后的新数量，若新数量为0，则将isActive设为true，自动切换回ADD按钮。

2. 优化ADD按钮的点击逻辑
   点击ADD按钮时，不仅切换isActive状态显示计数器，同时重置quantity为1，确保每次打开计数器时都从初始值1开始计数。

可选：更健壮的监听方案 #

如果未来可能通过其他方式修改数量（比如批量修改），可以使用useEffect监听quantity的变化，自动触发状态切换：

import { useState, useEffect } from 'react';

const Card = (product) => {
    const [isActive, setIsActive] = useState(true);
    const [quantity, setQuantity] = useState(1);

    const handleDecrement = () => {
        if (quantity > 0) {
            setQuantity((prevCount) => prevCount - 1);
        }
    };

    const handleIncrement = () => {
        if (quantity < 10) {
            setQuantity((prevCount) => prevCount + 1);
        }
    };

    // 监听数量变化，归零时自动切换回ADD按钮
    useEffect(() => {
        if (quantity === 0) {
            setIsActive(true);
            setQuantity(1); // 重置数量为初始值
        }
    }, [quantity]);

    return (
        // 其余代码与上方一致
    );
};

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