Deno Fresh应用中表单数据无法在createNewUser函数正常传递问题

核心问题分析 #

你遇到的问题由以下几个关键错误导致：

• 请求头Content-Type配置错误，服务端无法解析JSON请求体
• 异步函数调用未处理await和异常，导致重复执行与控制台报错
• Island组件（客户端）导入了服务端专属模块，引发浏览器环境执行异常
• 表单事件绑定使用了小写onsubmit，不符合Preact的事件绑定规范

具体修复步骤 #

1. 修正请求头Content-Type
   发送JSON格式请求时，必须将Content-Type设置为application/json，否则服务端无法正确解析请求体中的email和key：

   const headers = new Headers({
     'Content-Type': 'application/json'
   });
   

2. 处理异步函数的await与异常
   createNewUser是异步函数，handleSubmit调用时必须加await，同时添加异常捕获避免控制台报错：

   const handleSubmit = async (event) => {
     event.preventDefault();
     const emailInput = event.target.email;
     const keyInput = event.target.key;
     console.log(emailInput.value);
     console.log(keyInput.value);
     try {
       await createNewUser(emailInput.value, keyInput.value);
     } catch (err) {
       console.error('创建用户失败:', err);
     }
   };
   

3. 移除Island中的服务端模块导入
   Island是客户端运行的组件，不能导入$fresh/server.ts的Handlers、PageProps以及服务端数据库模块UserDb，直接删除这些无用导入：

   // 移除以下行：
   // import { Handlers, PageProps } from "$fresh/server.ts";
   // import UserDb from "../database.ts";
   

   同时，CreatorProps接口如果没有实际使用也可以删除（当前代码中未用到props）。

4. 修正表单事件绑定为驼峰式
   Preact中事件绑定需要使用驼峰命名，将onsubmit改为onSubmit：

   <form onSubmit={handleSubmit}>
   

完整修正后的Creator.tsx代码 #

import { useState, useEffect } from "preact/hooks";

export default function Creator() {
  const handleSubmit = async (event) => {
    event.preventDefault();
    const emailInput = event.target.email;
    const keyInput = event.target.key;
    console.log(emailInput.value);
    console.log(keyInput.value);
    try {
      await createNewUser(emailInput.value, keyInput.value);
    } catch (err) {
      console.error('创建用户失败:', err);
    }
  };

  async function createNewUser(email, key) {
    console.log(email);
    console.log(key);
    const headers = new Headers({
      'Content-Type': 'application/json'
    });
    const opts = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({
        email: email,
        key: key,
      })
    };
    const rawPosts = await fetch('http://localhost:8000/api/createUser', opts);
    console.log(rawPosts);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h1 class="text rounded-lg p-4 my-8"> Search </h1>
        <input class="center rounded-lg p-4 my-8" type="text" name="email" />
        <input class="center rounded-lg p-4 my-8" type="text" name="key" />
        <br />
        <button
          class="px-5 py-2.5 text-sm font-medium bg-blue-600 rounded-md shadow disabled:(bg-gray-800 border border-blue-600 opacity-50 cursor-not-allowed)"
          type="submit">Submit
        </button>
      </form>
      <br />
    </div>
  );
};

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