我有一个客户端组件，它有一个简单的文本字段，用于useState（）钩子。每当我更改文本并调用onChange时，我都会看到在loading.tsx中定义的加载UI，然后是更新后的UI。但文本字段不再聚焦。
我需要做什么更改，以便刷新UI而不显示加载UI，以便文本字段保持焦点？
文件夹结构如下所示：
- app
- layout.tsx
- products
- page.tsx
- loading.tsx
- [id]
- page.tsx (page mentioned above)app/products/[id]/page.tsx
"use client";
import { useState } from "react";
export default async function ProductDetail({
params,
}: {
params: { id: string };
}) {
const product = { id: "123", name: "Testprodukt" };
const [name, setName] = useState(product.name);
return (
<div>
<h1>Edit product</h1>
<div>
<p>Product name</p>
<input
type="text"
placeholder="Product name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
</div>
);
}app/products/loading.tsx
import LoadingIndicator from "@/components/LoadingIndicator";
export default function Loading() {
return (
<div>
<LoadingIndicator />
</div>
);
}app/layout.tsx
import Navbar from "@/components/Navbar";
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<div>
<Navbar />
<div>{children}</div>
</div>
</body>
</html>
);
}
1条答案
按热度按时间umuewwlo1#
我找到解决办法了。函数组件被声明为async。当删除async时，它按预期工作。