我正在使用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 />
</>
);
}
1条答案
按热度按时间yruzcnhs1#
在
input
元素中,您没有设置值prop。我认为你的状态得到更新,但不是输入。