NextJS代码重复多次执行的原因及规避方法

云原生阿岚

2026-8-29

根本原因

你将异步接口请求逻辑直接写在了组件渲染分支中，违反React执行规则：React组件渲染函数会在状态更新、Props变更、上下文变化等多种场景下重复执行，渲染阶段不允许放置任何副作用（接口请求、路由跳转都属于副作用），只要组件触发重渲染，handleUser就会被重复调用，且上一次异步请求未执行完成时，下一次调用就会触发。
Next.js开发模式默认开启React严格模式，会在开发环境主动双次执行组件挂载、渲染流程，用来提前检测不规范的副作用写法，这是你观察到短时间内重复发起请求的直接触发因素；你猜测的服务端/客户端双端执行也属于可能的触发场景，但核心问题始终是副作用放置位置错误。
现有逻辑存在天然竞态缺陷：代码中定义的bUserExists是组件作用域内的局部变量，每次组件重渲染都会被重置为初始值false，根本无法拦截重复请求；当两次创建请求的间隔短于第一次请求的"查用户-写库"全流程耗时，两次校验都会得到"用户不存在"的结果，最终写入多条重复记录。

修复方案

所有副作用逻辑必须移入useEffect钩子执行，禁止在组件渲染的顶层分支直接调用异步请求、路由跳转类方法。
使用useRef存储跨渲染周期的请求锁标记，避免重渲染导致逻辑重复执行，同时在请求报错时重置锁，保证用户可以重试操作。
数据库层必须对用户邮箱字段添加唯一索引，作为兜底防线，从数据层阻止重复记录写入，避免前端校验被并发请求穿透。

修复后的参考代码：

import { useEffect, useRef } from 'react'
// 其余业务依赖保持原有引入逻辑

function AuthPage() {
  const { user, error, isLoading } = useUser();
  // 跨渲染周期存储请求执行状态，不会因重渲染重置
  const isUserProcessing = useRef(false);

  const handleUser = async (targetUser) => {
    if (isUserProcessing.current) return;
    isUserProcessing.current = true;

    try {
      // 查询用户是否已存在
      const userRes = await axios.get(GET_USER(targetUser.email));
      if (userRes.data) {
        router.push('/form/p1');
        return;
      }
    } catch (err) {
      // 仅404状态代表用户不存在，其余错误重置锁后退出
      if (err.response?.status !== 404) {
        isUserProcessing.current = false;
        console.error('查询用户信息失败', err);
        return;
      }
    }

    try {
      // 用户不存在则创建新用户
      const newUserRes = await axios.post(CREATE_USER(), {
        email: targetUser.email,
        name: targetUser.name,
      });
      if (newUserRes.data) {
        router.push('/form/p1');
      }
    } catch (err) {
      // 创建失败重置锁，支持用户重试
      isUserProcessing.current = false;
      console.error('创建用户失败', err);
    }
  };

  // 仅在user状态变化时触发副作用，不在渲染阶段直接调用
  useEffect(() => {
    if (user && !isUserProcessing.current) {
      handleUser(user);
    }
  }, [user]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;
  // 渲染阶段仅返回UI，不执行业务副作用
  return <div>正在初始化账号信息...</div>;
}

export default AuthPage;

注意：不要通过关闭React严格模式规避问题。严格模式只是提前暴露代码缺陷，生产环境下即使关闭严格模式，只要组件触发重渲染（父组件更新、全局状态变化、路由事件触发等），原有写法依然会出现重复请求问题。
数据库唯一索引是必须的兜底措施，无论前端做多少层拦截，都可能出现并发请求穿透的情况，唯一约束可以从根本上阻止重复数据落库。

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