未注册用户注册后同步进度，如何避免重复发送PUT请求？

为什么会重复发送请求？ #

你直接在组件的渲染流程里调用updateUser，组件每次重渲染（比如session状态更新、上下文progressArr变化）都会执行这段逻辑，自然会重复触发PUT请求。另外，use()钩子的用法也不对——它不能在普通函数内部调用，而且这里完全不需要用这个钩子处理异步请求。

修复后的代码 #

'use client'
import { useSession, signIn, signOut } from 'next-auth/react'
import { useContext, useEffect, useState } from 'react'
import AppContext from '../../utils/AppContext'

const updateProfile = async (email, prog) => {
  // 用AbortController防止重复请求堆积
  const controller = new AbortController()
  try {
    await fetch(`http://localhost:3000/api/users/${email}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        progress: prog,
      }),
      signal: controller.signal
    })
    return () => controller.abort()
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('同步进度失败:', err)
    }
  }
}

export default function Component() {
  const { progressArr, setProgressArr } = useContext(AppContext)
  const { data: session, status } = useSession()
  // 标记是否已完成进度同步，避免重复触发
  const [isSyncCompleted, setIsSyncCompleted] = useState(false)

  useEffect(() => {
    // 仅满足所有条件时触发同步：已登录、用户进度为空、未同步过、存在进度数据
    if (status === 'authenticated' && !session?.user?.progress && !isSyncCompleted && progressArr?.length) {
      const syncProgress = async () => {
        await updateProfile(session.user.email, progressArr)
        // 同步完成后标记状态，防止再次触发
        setIsSyncCompleted(true)
        // 可选：更新session中的progress字段，避免后续检查时重复进入逻辑
        // 可通过NextAuth的updateSession方法实现
      }
      syncProgress()
    }
  }, [status, session, isSyncCompleted, progressArr])

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

关键修复点 #

• 用useEffect监听依赖项变化，仅在状态满足条件时执行一次同步请求。
• 添加isSyncCompleted状态标记，同步完成后不再触发请求。
• 引入AbortController，取消未完成的重复请求，避免请求堆积。

更优实现思路 #

1. 注册时直接传递进度：在用户提交注册表单时，直接把localStorage中的进度数据传给后端注册接口，后端创建用户时直接写入数据库，省去后续同步步骤。
2. 更新Session数据：同步成功后调用NextAuth的updateSession方法，更新session中的progress字段，后续组件渲染时会跳过同步逻辑。
3. 持久化同步状态：把isSyncCompleted存入localStorage，避免用户刷新页面后再次触发同步。
4. 后端幂等处理：给PUT接口添加幂等性校验（比如用用户ID+进度哈希做标识），即使前端重复发送请求，后端也只会执行一次更新，避免数据异常。

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