在React中如何订阅Recurly.js checkout定价相关事件？

云上老周

2026-9-26

解决方案

你遇到的核心原因是useCheckoutPricing返回的checkoutPricing实例会在每次价格计算状态更新时生成新的引用，你之前的写法既没有解绑旧实例的事件，也不符合react-recurly的封装设计。

方案1：优先使用官方封装的响应式状态（推荐）

react-recurly已经把所有常用的变更封装到了返回的price状态中，你不需要手动监听原生事件，直接监听price.plan的变化即可实现需求：

const [{ price, loading }, setPricing, checkoutPricing] = useCheckoutPricing(
  null,
  setRecurlyError
);

useEffect(() => {
  if (price?.plan) {
    console.log("plan updated", price.plan);
    // 此处写入套餐变更后的业务逻辑
  }
}, [price?.plan]);

这种写法完全符合React的响应式开发范式，不需要处理实例的绑定解绑逻辑，稳定性更高。

方案2：如果必须使用原生事件监听

如果你有特殊场景必须用到原生的set.plan事件，需要在useEffect的销毁回调中解绑旧事件，避免内存泄漏和无效绑定：

const [{ price, loading }, setPricing, checkoutPricing] = useCheckoutPricing(
  null,
  setRecurlyError
);

useEffect(() => {
  // 实例不存在时直接返回
  if (!checkoutPricing) return;

  const handlePlanSet = (plan) => {
    console.log("plan updated", plan);
  };

  checkoutPricing.on("set.plan", handlePlanSet);
  // 重点：实例更新/组件卸载时解绑事件
  return () => checkoutPricing.off("set.plan", handlePlanSet);
}, [checkoutPricing]);