React Hooks 报错？一招解决useState问题

文章目录

• • 问题
  • 分析

问题

在使用import { useState } from "react";时报错：You're importing a component that needs useState. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the "use client" directive.

import TodoFilter from "./components/TodoFilter";
import TodoList from "./components/TodoList";
import AddTodo from "./components/AddTodo";
import TodoItem from "./components/TodoItem";
import { useState } from "react";

export default function Home() {
  const [todos, setTodos] = useState([]);
  return (
    <div>
      <h1>TodoList</h1>
      <AddTodo />
      <TodoList />  
      <TodoFilter />
    </div>
  )
}

分析

这个错误是因为在 Next.js 13+ 的 App Router 中，默认情况下所有组件都是服务器组件（Server Components），而 useState 等 React Hooks 只能在客户端组件（Client Components）中使用。

解决方案很简单，需要在文件顶部添加 "use client" 指令，将这个组件标记为客户端组件。应修改 page.tsx 文件为：

"use client";

import TodoFilter from "./components/TodoFilter";
import TodoList from "./components/TodoList";
import AddTodo from "./components/AddTodo";
import TodoItem from "./components/TodoItem";
import { useState } from "react";

// ... 其余代码保持不变 ...