调用fetch创建记录时遇Server Functions初始渲染错误求助

核心原因 #

错误提示说明你在组件初始渲染阶段执行了服务器函数调用，这类操作仅允许在用户交互（如点击按钮）触发的逻辑里执行。

具体修复步骤 #

• 标记组件为客户端组件：在组件顶部添加'use client'指令，因为表单交互、Zod校验都需要在客户端环境运行。
• 避免初始渲染时触发handleSubmit：检查表单提交事件绑定，确保是onSubmit={handleSubmit}而非onSubmit={handleSubmit()}——后者会在组件渲染时直接执行函数，触发错误。
• 修正fetch请求配置：在handleSubmit里明确请求方法、请求头和请求体，确保是客户端发起的POST请求，示例代码：

async function handleSubmit(e) {
  e.preventDefault();
  
  // Zod校验逻辑
  const validationResult = yourZodSchema.safeParse(yourFormData);
  if (!validationResult.success) {
    // 处理校验失败逻辑
    return;
  }

  try {
    const response = await fetch('../pages/api/boards', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(validationResult.data),
      credentials: 'include', // 需传递会话凭证时添加
    });

    if (!response.ok) throw new Error('创建记录失败');
    const result = await response.json();
    // 处理成功后的逻辑（如提示、页面跳转）
  } catch (error) {
    // 处理请求错误
    console.error(error);
  }
}

• 检查API路由逻辑：确保pages/api/boards.js（或.ts）里的POST请求处理正确，比如正确解析请求体、操作数据库并返回对应状态码。

内容的提问来源于stack exchange，提问作者Daryl Mbakop Mr miel