元素
元素
工具
博客
问答

Server Components 里为啥不能直接用 useState？

南宫雪琪 阅读 23
框架

我在写 Next.js 的 Server Component 时，想加个简单的状态切换，结果一用 useState 就报错，说 Hooks 只能在 Client Components 里用。可我这个组件明明只是展示数据，为啥非得改成客户端组件啊？

我试过把整个文件加上 ‘use client’，但听说这样会失去 Server Component 的优势，比如没法直接读数据库了。有没有办法在保持服务端渲染的同时处理这种简单交互？

export default function Profile({ user }) {
  const [showBio, setShowBio] = useState(false); // 这行直接报错
  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => setShowBio(!showBio)}>Toggle Bio</button>
      {showBio && <p>{user.bio}</p>}
    </div>
  );
}
我来解答 赞 3 收藏
二维码
手机扫码查看
反馈
1 条解答
设计师羽铮
设计师羽铮 Lv1
Server Components 里不能直接用 useState，得改成 Client Component。我一般直接在组件顶部加个 'use client'，然后用 useState。代码就是这么写的：

'use client';

import { useState } from 'react';



export default function Profile({ user }) {

  const [showBio, setShowBio] = useState(false);

  return (

    


      
{user.name}


      

      {showBio && 
{user.bio}
}

    


  );

}
点赞
2026-03-20 22:07
相关推荐
元素
元素
工具
博客
问答
登录/注册