Next.js页面加载时所有函数自动执行（而非按需调用）及按钮点击事件异常求助

AI 小北

2026-4-27

问题根源与解决方案

嘿，这问题我太熟了！核心问题出在你给按钮onClick属性赋值的方式上——你直接执行了goBlank(getUrl())，而不是传递一个函数引用。

为什么会自动执行还循环？

当React渲染你的组件时，它会解析JSX里的表达式。你写的onClick={goBlank(getUrl())}会立刻调用goBlank(getUrl())，而不是等到点击事件触发时才执行。这就是为什么页面一加载就打开新页面的原因。
开发模式下Next.js默认启用了React Strict Mode，它会故意重复渲染组件两次（加上初始渲染可能出现三次执行的情况），用来帮你检测潜在的副作用问题，这就导致函数被重复执行三次。
新打开的页面又会加载你的组件，再次触发这个自动执行的逻辑，于是形成了无限循环打开页面的情况。

怎么修复？

你需要把onClick的值改成一个函数，让它只有在点击时才调用goBlank(getUrl())。有两种常用的写法：

方法1：用箭头函数包裹

<button onClick={() => goBlank(getUrl())} className="ab">About:Blank</button>

这里的箭头函数是一个引用，只有当按钮被点击时，浏览器才会执行这个箭头函数，进而调用goBlank(getUrl())。

方法2：提前定义处理函数

如果getUrl()的逻辑比较复杂，或者你想让代码更清晰，可以在组件内部单独定义一个处理函数：

// 在组件函数内部定义
const handleOpenBlankPage = () => {
  const targetUrl = getUrl();
  goBlank(targetUrl);
};

// 按钮上使用这个函数的引用
<button onClick={handleOpenBlankPage} className="ab">About:Blank</button>

这种方式和箭头函数的效果一样，而且更便于调试和复用。