MonkeyCode帮我修了3个Bug：AI代码审查实战

MonkeyCode帮我修了3个Bug：AI代码审查实战

背景

上个月，我在做一个Next.js电商项目时，遇到了几个诡异的Bug：

1. 用户退出登录后，购物车数据还在
2. 移动端点击购物车图标，偶发卡顿
3. 支付成功后，订单状态有时不更新

这些问题都是间歇性出现，控制台没有报错，单元测试也覆盖到了。我花了两天时间排查，进展缓慢。

最后试了试MonkeyCode的代码审查功能，结果——30分钟定位了3个Bug。

Bug 1：退出登录后购物车数据残留

问题现象

用户点击"退出登录"，重新登录后发现购物车里还有之前的商品。

我的排查过程

查了logout()函数，确认了localStorage.clear()和cartStore.reset()都调用了，逻辑上没问题。

MonkeyCode的代码审查

我把整个购物车相关的代码复制给MonkeyCode，让它做代码审查：

这是我的购物车状态管理代码，帮我看看退出登录后购物车数据为什么还会残留

MonkeyCode的回复（关键部分）：

问题定位：
在 stores/cartStore.ts 中，你使用了 zustand 的 persist 中间件，
persist 配置中 name 为 "cart-storage"，但没有在 logout 时
调用 cartStore.persist.clear()。

localStorage.clear() 清除了所有 localStorage，
但 zustand-persist 在页面加载时会从 storage 中恢复状态，
如果 storage 中还有缓存（比如你用了 sessionStorage 作为 fallback），
状态会被恢复。

建议修复：
在 logout 函数中加入：
  import { useCartStore } from '@/stores/cartStore';
  const { persist } = useCartStore;
  persist.clear();

修复结果

加了persist.clear()之后，Bug消失。

根本原因：zustand-persist的缓存恢复机制，在localStorage.clear()之后仍然从sessionStorage恢复了状态。

Bug 2：移动端购物车图标卡顿

问题现象

移动端（特别是iOS Safari）点击购物车图标时，有时会有0.5~1秒的卡顿感。

MonkeyCode的代码审查

我把购物车组件的代码发给MonkeyCode：

移动端点击购物车图标有时会卡顿，帮我分析可能的原因

MonkeyCode的分析：

可能原因1：点击事件触发了不必要的re-render
  在 CartIcon 组件中，你直接使用了 useCartStore()，
  这会在每次购物车状态变化时触发 re-render。
  点击图标时，如果购物车状态正在更新，会造成卡顿。

可能原因2：动画阻塞主线程
  cart-bounce animation 使用了 will-change: transform，
  但在iOS Safari上，will-change有时会触发额外的合成层计算。

建议优化：
1. 用 useShallow 做浅比较，避免不必要的re-render：
     const cartCount = useCartStore(useShallow(state => state.items.length));
2. 将动画改为 transform: translateZ(0) 触发硬件加速：
     .cart-bounce { transform: translateZ(0); }

修复结果

加了useShallow + 修改动画属性后，卡顿消失。

根本原因：zustand的useStore()默认是深比较，每次状态变化都触发re-render；加上iOS Safari对will-change的处理有性能问题。

Bug 3：支付成功后订单状态不更新

问题现象

用户支付成功后，跳转到订单详情页，订单状态有时还是"待支付"。

MonkeyCode的代码审查

我把支付回调的代码发给MonkeyCode：

支付成功后订单状态有时不更新，可能是什么原因

MonkeyCode的分析：

问题定位：
在 payment/callback.ts 中，你通过 useEffect 监听支付状态变化：
  useEffect(() => {
    if (paymentStatus === 'success') {
      updateOrderStatus(orderId, 'paid');
    }
  }, [paymentStatus]);

这里有一个竞态条件：
  - 用户支付成功后，paymentStatus 变为 'success'
  - 但此时 orderId 可能还没有从 URL 中解析完成
  - useEffect 触发时，orderId 是 undefined，导致更新失败

建议修复：
  useEffect(() => {
    if (paymentStatus === 'success' && orderId) {
      updateOrderStatus(orderId, 'paid');
    }
  }, [paymentStatus, orderId]);

修复结果

加了orderId依赖和判断后，Bug消失。

根本原因：React的useEffect依赖数组不完整，导致在orderId尚未就绪时就执行了更新逻辑。

三个Bug的共同特点

1. 都是间歇性出现，不容易复现
2. 逻辑上"看起来"没问题，单元测试覆盖到了
3. 根本原因都在状态管理/生命周期，不属于"语法错误"或"运行时错误"

这类问题，靠人工排查效率低，靠单元测试难覆盖，但AI代码审查可以快速定位。

MonkeyCode代码审查的使用技巧

经过这次实战，我总结了几个技巧：

1. 给足够的上下文

❌ 不好：

这段代码有Bug，帮我看看

✅ 好：

这是购物车状态管理代码，退出登录后购物车数据还会残留，
我已经调用了localStorage.clear()和cartStore.reset()，
但问题还在。帮我分析可能的原因。

2. 指定审查重点

❌ 不好：

帮我审查这段代码

✅ 好：

帮我审查这段代码的性能问题，特别是移动端的卡顿可能性

3. 提供复现路径

❌ 不好：

有时候会出错

✅ 好：

复现路径：1.用户添加商品到购物车 2.退出登录 3.重新登录
期望：购物车为空；实际：购物车还有之前的商品

小结

AI代码审查不是万能的，但对于"逻辑正确但偶尔出错"这类问题，效率比人工排查高得多。

关键不是让AI替代你思考，而是让AI帮你快速缩小排查范围。

三个Bug，人工排查花了2天；用MonkeyCode代码审查，30分钟定位全部。