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.

javascript 复制代码
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),而 useStateReact Hooks 只能在客户端组件(Client Components)中使用。

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

javascript 复制代码
"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";

// ... 其余代码保持不变 ...
相关推荐
尘世中一位迷途小书童22 分钟前
Vuetify Admin 后台管理系统
前端·前端框架·开源
参宿722 分钟前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_8012522229 分钟前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架
资讯第一线41 分钟前
《Windows Server 2022》 [2025年10月版 ] [官方IOS] 下载
前端
非凡ghost42 分钟前
EaseUS Fixo(易我视频照片修复)
前端·javascript·后端
非凡ghost44 分钟前
Avast Cleanup安卓版(手机清理优化)
前端·javascript·后端
豆苗学前端44 分钟前
长时间不操作自动退出登录(系统非活跃状态下自动登出机制的企业级设计方案)
前端·后端·面试
一乐小哥1 小时前
用 AI 搞出 Chrome 版 “飞书 Command+K”!Figma AI 救了我的审美
前端·ai编程
非凡ghost1 小时前
Atlantis Word Processor(文字处理软件)
前端·javascript·后端
小时前端1 小时前
面试官:线上应用内存持续泄漏,你如何快速定位并止血?
前端·浏览器