next.js 在input元素中输入一些东西,页面就卡住了

ivqmmu1c  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(147)

我正在使用Nextjs 13.4进行练习,在使用Form时遇到了问题。我有一个页面待办事项列表,在这个页面中,我有一个TodoList组件和一个AddTodo组件。AddTodo组件是一个客户端组件,我可以在其中使用表单向服务器提交新的待办事项。当我尝试在输入框中键入内容时,页面卡住了,这意味着我无法实现任何用户交互。当我运行npm run dev或npm run build时,我的页面没有错误。请帮帮我下面是我的代码:
下面是AddTodo组件:

"use client";

import handleAddTodo from "@/lib/handleAddTodo";
import { ChangeEvent, FormEvent } from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default async function AddTodo() {
  const [name, setName] = useState<string>("");

  const handleChangeName = function (e: ChangeEvent<HTMLInputElement>) {
    setName(e.target.value);
  };
  const router = useRouter();
  const handleAdd = async function (e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (name) {
      await handleAddTodo(name);
      router.refresh();
    }
  };

  return (
    <form onSubmit={handleAdd}>
      <input onChange={handleChangeName} type="text" />
      <button>Add Todo</button>
    </form>
  );
}

下面是发布新待办事项的函数,我已经用Postman测试过了:

export default async function handleAddTodo(name: string): Promise<void> {
  const res = await fetch("http://localhost:8000/todos", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name }),
  });

  if (!res.ok) {
    throw new Error("add todos error");
  }

  return;
}

以下是整个页面:

import { Metadata } from "next";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";

//SET REVALIDATE 0 TO MAKE THE PAGE RENDERED AS A SSR PAGE (NO DATA CACHING)
export const revalidate = 0;

export const metadata: Metadata = {
  title: "Todo list",
};

export default function Todos() {
  return (
    <>
      {/* @ts-expect-error Async Server Component */}
      <AddTodo />
      {/* @ts-expect-error Async Server Component */}
      <TodoList />
    </>
  );
}
yruzcnhs

yruzcnhs1#

input元素中,您没有设置值prop。我认为你的状态得到更新,但不是输入。

<input onChange={handleChangeName} value={name} type="text" />

相关问题