Client Component 里为啥不能用 useState？

继芳 ☘︎ 提问于 2026-03-07 15:27:20 阅读 72

框架

我在 Next.js 13+ 里写了个组件，加了 "use client" 指令，但一用 useState 就报错说 React 不是函数，这不科学啊？

我确定文件顶部写了 "use client"，也 import 了 useState，但控制台一直报：

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useState) is not a function

是不是我哪里搞错了？比如用了服务端的 React 版本？可项目里明明只装了一个 react 啊……

我来解答赞 2 收藏

反馈

1 条解答

ლ江洁 Lv1

啊这个报错我见过，多半是React的import写法有问题。Next.js 13+的环境确实有点特殊。

建议改成这样：

"use client"

import { useState } from 'react'  // 注意这里不是从'react'默认导入

常见问题出在这几种情况：
1. 有人写成 import React from 'react' 然后用 React.useState，这在客户端组件里会挂
2. 服务端组件和客户端组件混用同一个react实例（虽然你说只装了一个react，但Next.js打包时会区分）
3. 开发环境缓存没清干净，可以试试删掉node_modules/.vite和.next/cache

顺便说个坑：如果你用TS，有时候IDE自动导入会给你生成错误的import语句，记得检查一下是不是按我说的方式导入的。

最后可以看下package.json确认react和react-dom版本匹配（比如都是18.2.x），版本太乱也可能出幺蛾子。

2026-03-07 16:16