NextJS中作为Prop传递的函数点击时未触发问题求助

你的问题出在服务器动作函数的调用方式和日志输出位置上，具体来说：

1. 你在服务器组件（Home）里定义的buttonClick带有"use server"指令，这是一个服务器端运行的动作函数，它的console.log会输出在服务器终端（你启动Next.js的命令行窗口），而不是浏览器的开发者工具控制台。
2. 服务器动作是异步函数，客户端组件调用时必须用await，否则无法正确触发执行。

修改后的代码 #

Home页面（服务器组件）

import React from "react";
import "./homePage.css";
import ButtonComponent from "@/Components/ButtonComponent/ButtonComponent";

const Home = () => {
  const buttonClick = async () => {
    "use server";
    console.log("Function from the App Page"); // 此日志将显示在服务器终端
  };

  return (
    <main className="homepage">
      <div>
        <ButtonComponent
          className="sales-button"
          label="Sales"
          buttonClick={buttonClick}
        />
      </div>
    </main>
  );
};

export default Home;

ButtonComponent（客户端组件）

"use client";
import React from "react";
import "./buttonComponent.css";

const ButtonComponent = ({
  label = "Button",
  buttonClick,
  className = "button",
}: {
  label?: string;
  buttonClick: () => Promise<void>;
  className?: string;
}) => {
  const handleClick = async () => {
    console.log("Check to see if onClick is triggering"); // 此日志显示在浏览器控制台
    if (buttonClick) {
      await buttonClick(); // 必须用await调用服务器动作
    }
  };
  return (
    <button className={className} onClick={handleClick}>
      {label}
    </button>
  );
};

export default ButtonComponent;

关键注意点 #

• 服务器动作函数的代码完全在服务器端执行，所以所有console.log、数据处理等操作都不会在浏览器端留下痕迹，只能在服务器终端查看。
• 客户端调用服务器动作时，必须将调用逻辑放在async函数里并使用await，否则函数会被触发但不会等待执行完成，也无法捕获返回值或错误。
• 给组件props添加明确的类型定义（替换原来的any），可以提前发现类型错误，提升代码稳定性。

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