bounty将在7天后过期。回答此问题可获得+50的声望奖励。JohnPix正在寻找规范答案。

我有一个未注册的用户使用我的应用程序，取得了一些进展。我把这个进展保存在本地存储器中。然后，当用户决定注册时，我发送一个PUT请求，以使他的进展与DB同步。
为此，我跟踪它的status，当它变成authenticated并且progress参数为空时，我发送一个PUT请求，但问题是它发送几十个PUT请求来更新进度，而不是一个。

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

const updateProfile = async (email, prog) => {
  await fetch(`http://localhost:3000/api/users/${email}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      progress: prog,
    }),
  })
}

export default function Component() {
  const { progressArr, setProgressArr } = useContext(AppContext)
  const { data: session, status } = useSession()

  function updateUser() {
    use(updateProfile(session.user.email, progressArr))
  }

  if (status === 'authenticated') {
    if (!session.user.progress) {
      updateUser()
    }
  }

  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>
    </>
  )
}