React项目Vercel部署后购物车计数异常，Antd Badge数值为1时不更新

根因说明 #

问题出在Ant Design Badge组件本身的内部状态缓存逻辑：部分版本的Antd Badge会对count值做内部状态缓存，当数值变化幅度较小（尤其是从0变为1的场景）时，生产环境打包后会出现内部状态未同步更新的问题，本地开发环境因为热更新逻辑不会触发该异常。

可用解决方案 #

• 强制重渲染方案（首选，保留原生动画）
  给Badge组件绑定key属性，值直接关联totalQuantity，每次数值变化时都会销毁重建Badge组件，完全避开内部缓存问题，代码修改如下：

function Cart(props) {
  const { enableCart, totalQuantity } = useContext(AppContext);

  return (
    <>
      {enableCart ? (
        <Link href="/cart" passHref>
          <a aria-label="Shopping cart" title="Shopping cart">
            {/* 新增key属性绑定totalQuantity */}
            <Badge key={totalQuantity} count={totalQuantity} offset={[0, 5]}>
              <ShoppingCartIcon className="w-7 h-7" />
            </Badge>
          </a>
        </Link>
      ) : null}
    </>
  );
}

该方案无需修改其他业务逻辑，Badge自带的数字变化动画可以完全保留。

• 显式指定属性规避默认逻辑异常
  显式设置showZero属性，避免生产环境下默认值判断异常，如果业务不需要显示0计数，可设置为false：

<Badge count={totalQuantity} showZero={false} offset={[0, 5]}>

• 版本升级修复
  目前已知Antd v4.17.x ~ v4.19.x的部分版本存在Badge状态更新不同步的已知bug，可将Antd升级到v4.24.x稳定版或v5.x版本直接修复该问题。

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