Next.js/React组件onClick函数失效求助（next-auth场景）

问题根源 #

你的登录、登出按钮组件中，onClick事件只是引用了函数，没有调用函数，导致点击时没有执行对应的登录/登出逻辑，这就是控制台无日志、按钮失效的核心原因。

修复后的代码 #

登录/登出按钮组件修改： #

"use client";

import { signIn, signOut } from "next-auth/react";

async function login() {
  await signIn("credentials", { callbackUrl: "/admin" }).catch(console.error);
}

async function logout() {
  await signOut({ callbackUrl: "/" }).catch(console.error);
}

export function LoginButton() {
  // 修正方式1：箭头函数内调用login函数
  return <button onClick={() => login()}>Sign In</button>;
  // 或者修正方式2：直接传递函数引用（更简洁）
  // return <button onClick={login}>Sign In</button>;
}

export function LogOutButton() {
  // 修正方式1：箭头函数内调用logout函数
  return <button onClick={() => logout()}>Sign Out</button>;
  // 或者修正方式2：直接传递函数引用（更简洁）
  // return <button onClick={logout}>Sign Out</button>;
}

补充说明 #

• 原代码中() => login是一个返回login函数的箭头函数，但没有执行它，所以点击按钮时不会触发任何操作。
• 两种修正方式都可行：
  1. 箭头函数内调用函数：适合需要额外传参的场景。
  2. 直接传递函数引用：更简洁，适合无额外参数的情况。
• 你的Header组件逻辑没有问题，它只是根据服务端会话渲染对应的按钮组件，无需修改。

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