React使用useState实现加购按钮双点击逻辑的功能异常排查

• 核心故障：按钮文本硬编码，未绑定buttonText状态。你虽然定义了buttonText状态并在点击时修改其值，但JSX中按钮直接写死了Add to Cart，状态变化不会同步到界面。你之前看到的“只有加购逻辑生效”是假象：setButtonText实际已执行，只是修改的值没有渲染到UI上，因此看起来文本切换效果完全失效。
• 变量笔误：你定义的商品变体状态为variant，但handleAddToCart内引用了未定义的productVariant，会导致加购逻辑报错（若为示例简写可忽略，实际运行需统一变量名）。
• 潜在风险：按钮设置了type="submit"，若该按钮处于表单元素内，会默认触发表单提交刷新页面，可能抵消已执行的逻辑。

// 固定常量移到组件外部，避免每次渲染重复创建
const INITIAL_BUTTON_TEXT = "Add To Cart";

function AddToCartButton({ available }) {
  // 保留原有状态定义
  const [variant, setVariant] = useState({ ...initialVariant })
  const [quantity, setQuantity] = useState(1)

  const {
    addVariantToCart,
    store: { adding },
  } = useContext(StoreContext)

  const [buttonText, setButtonText] = useState(INITIAL_BUTTON_TEXT);

  const handleAddToCart = () => {
    // 统一使用已定义的variant变量
    addVariantToCart(variant.shopifyId, quantity)
  }

  const handleClick = () => {
    setButtonText("Added");
    handleAddToCart();
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      setButtonText(INITIAL_BUTTON_TEXT);
    }, 1000);
    return () => clearTimeout(timer);
  }, [buttonText])

  return (
    <>
      <button
        className="add"
        // 非表单场景改为button类型，避免默认提交
        type="button"
        disabled={!available || adding}
        onClick={handleClick}
      >
        {/* 绑定状态而非硬编码 */}
        {buttonText}
      </button>
      {!available && <p>This Product is out of Stock!</p>}
    </>
  )
}

• 按钮内容替换为{buttonText}：绑定状态后，点击触发的setButtonText("Added")会直接同步到界面，实现文本切换。
• 修正handleAddToCart的变量引用：统一使用已定义的variant，避免未定义变量报错。
• 调整按钮type：非表单场景下用type="button"，消除默认表单提交的潜在影响。
• 原有合并onClick的逻辑完全正确：React中同一元素的同一事件只能绑定一个处理函数，无需重复绑定onClick，将所有逻辑合并到同一个处理函数是标准实现，之前的问题并非出在合并逻辑上。
• 可选优化：若要避免首次挂载时创建无意义的定时器，可添加useRef判断跳过首次渲染的effect执行。

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