React.js中点击“Add To Cart”按钮如何切换文本？能否用useState实现？

当然可以用useState来实现这个功能，具体实现步骤如下：

1. 在组件中引入并初始化状态变量，标记商品是否已加入购物车：

import { useState } from 'react';

// 组件内部初始化状态
const [isAddedToCart, setIsAddedToCart] = useState(false);

2. 修改addProductToCart函数，在添加商品完成后更新状态：

const addProductToCart = (product) => {
    const newProduct = {
        ...product,
        count: 1,
    };
    setProducts([
        ...productsInCart,
        newProduct,
    ]);
    // 更新状态为已加入
    setIsAddedToCart(true);
};

3. 修改按钮组件，根据状态动态切换显示文本：

<button
    className="btn"
    onClick={() => addProductToCart(products)}
    // 可选：禁用已点击的按钮，避免重复操作
    disabled={isAddedToCart}
>
    {isAddedToCart ? 'Added To Cart' : 'Add to cart'}
</button>

如果需要支持"取消加入"的切换逻辑（点击后可以恢复原状态），可以调整点击事件的状态更新方式：

<button
    className="btn"
    onClick={() => {
        addProductToCart(products);
        setIsAddedToCart(prevState => !prevState);
    }}
>
    {isAddedToCart ? 'Added To Cart' : 'Add to cart'}
</button>

注意这种场景下需要同步调整购物车数据的处理逻辑，保证状态与购物车实际数据一致。

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