javascript - 您正在导入一个需要 useState 的组件。它仅在客户端组件中有效，但其父组件均未标记为 "use client"

Question

用于处理文件上传的简单组件在 Next.js 的应用程序目录中抛出以下错误:

You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client", so they're Server Components by default.

import { useState } from "react";

export default function FileUploader() {
  const [files, setFiles] = useState([]);

  return (
    <div>
      Hello World
    </div>
  );
}

Answer 1

在app目录下，Next.js默认使用Server Components ，其中 JSX 被编译为“纯 HTML”并发送到浏览器。就像任何带有模板引擎的传统后端一样，例如带有 EJS 的 Express 和带有 Blade 的 Lavravel。这是为了更好的 SEO 和性能，您可以在 doc 上阅读:

Server Components allow developers to better leverage server infrastructure. For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead remain entirely on the server, leading to improved performance.

并且服务器组件不应包含特定于前端的代码，例如，useState 或 useEffect 等钩子(Hook)。如果您需要，您的组件或其父组件之一应该在顶部有 "use client"。这样，它就变成了 Client Component ，一个“普通”的 React 组件，正如我们目前所知。

"use client"; // this is a client component

import { useState } from "react";

export default function FileUploader() {
  const [files, setFiles] = useState([]);

  return (
    <div>
      Hello World
    </div>
  );
}