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";// ... 其余代码保持不变 ...