您正在导入需要 useState 的组件。它仅适用于客户端组件，但其父组件均未标记为“使用客户端”
You*_*mar 83 javascript reactjs next.js
app当我使用以下简单组件时，它会在 Next.js 的目录中抛出以下错误useState：
您正在导入需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。
import { useState } from "react";
export default function Card() {
const [state, setState] = useState("");
return <></>;
}
You*_*mar 176
在新app目录中，默认情况下，Next.js 使用Server Components，其中 JSX 被编译为“纯 HTML”并发送到浏览器。就像任何带有模板引擎的传统后端一样，例如带有 EJS 的 Express 或带有 Blade 的 Laravel。这是为了更好的性能，您可以在文档中阅读：
服务器组件允许开发人员更好地利用服务器基础设施。例如，以前会影响客户端上 JavaScript 包大小的大型依赖项现在可以完全保留在服务器上，从而提高性能。它们使编写 React 应用程序的感觉类似于 PHP 或 Ruby on Rails，但具有 React 模板化 UI 的强大功能和灵活性。
服务器组件不应包含特定于浏览器的内容，例如单击处理程序或挂钩，例如useState. 如果您需要，您应该"use client"在顶部添加以告诉 Next.js 发送该组件所需的 JavaScript，使其成为客户端组件：
"use client"; // This is a client component
import { useState } from "react";
export default function Card() {
const [state, setState] = useState(""); // I can use client hooks
return <></>;
}
现在，假设您正在导入一个尚未"use client"由维护者标记的特定于客户端的库。它将按原样在您的客户端组件中工作。但是，要将其导入到服务器中，您可以在与添加内容lib相同的级别创建一个文件夹：app
// lib/mui.js
"use client";
export * from "@mui/material";
并从那里导入它（这样，页面的其他部分仍然是服务器组件）：
// app/page.js
import { Button } from "../lib/mui";
export default function Page() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
如果您在设置context时遇到类似的错误，则指南是将其添加到其自己的"use client"标记文件中：
// app/theme-provider.tsx
"use client";
import { createContext } from "react";
export const ThemeContext = createContext("");
export default function ThemeProvider({ children }) {
return (
<ThemeContext.Provider value="dark">
{children}
</ThemeContext.Provider>
);
}
并将其从那里导入到您的服务器组件中：
// app/layout.js
import ThemeProvider from './theme-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
此外，您在尝试填充商店时可能会遇到类似的错误。这意味着您的商店使用客户端逻辑，因此您需要将其移动到"use client"标记的文件中。如果要使用从服务器获取的数据，您可以这样做：
// app/theme-provider.tsx
"use client";
import { createContext } from "react";
export const ThemeContext = createContext("");
export default function ThemeProvider({ children }) {
return (
<ThemeContext.Provider value="dark">
{children}
</ThemeContext.Provider>
);
}
// app/layout.js
import ThemeProvider from './theme-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
最后，如果您的目的是设置一个全局存储或上下文以在服务器组件之间共享数据，您可以重新考虑您的方法，正如他们在文档中所说：
由于服务器组件不是交互式的，因此不会从 React 状态读取，因此您不需要上下文的全部功能来共享数据。如果您有多个服务器组件需要访问的公共数据，您可以在模块范围内使用本机 JavaScript 模式，例如全局单例。
例如，模块可用于在多个组件之间共享数据库连接：
// app/layout.js
import PopulateStore from "./populate-store";
const getData = async () => {
const res = await fetch("https://jsonplaceholder.org/posts");
return await res.json();
};
export default async function Layout({ children }) {
// Fetch data on the server
const data = await getData();
return (
<html>
<body>
{/* Pass it to your client store initializer */}
<PopulateStore data={data}>{children}</PopulateStore>
</body>
</html>
);
}
// app/populate-store.js
"use client";
export default function PopulateStore({ data, children }) {
// You can populate your store, whatever it may be, with data
return <>{children}</>;
}
// utils/database.ts
export const db = new DatabaseConnection();
在上面的例子中，布局和页面都需要进行数据库查询。每个组件都通过导入
@utils/database模块来共享对数据库的访问。
但是假设您想要使用服务器组件存储，因为您正在从 API 获取数据并且不想进行多次调用。好吧，如果您正在使用fetch()（很快其他库）来获取数据，Next.js 将删除这些调用的重复数据并使用缓存。所以平时你不应该打扰。
kri*_*yaa 22
在app目录中，Next.js默认使用Server Components
为了克服这个use client指令
'use client' // use it here
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
何时使用服务器和客户端组件
参考官方文档
另请参阅最新的 Nextjs 13 代码模板 Next.js 13+ Power Snippets | TypeScript/Javascript
它包含广泛的代码片段，适用于ts和js. 在这里查找所有片段
| 归档时间： |
|
| 查看次数： |
135493 次 |
| 最近记录： |