Nextjs客户端渲染不工作?

eqqqjvef  于 2023-10-18  发布在  其他
关注(0)|答案(4)|浏览(148)

我在nextjs 13中创建了一个使用app router的项目。我想实现客户端渲染。在他们的文档中提到,对于在客户端渲染,在文件顶部添加'use client',这将在客户端渲染。但不幸的是,我不能有它的客户端的影响。我被那个缠住了。
这是我的page.js文件:

'use client';

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  console.log("counter")

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
 }

它应该在客户端呈现,但它不是。

wsxa1bj1

wsxa1bj11#

将您的app/page.js迁移到pages/index.js,看看它是否有效。谢谢.

g6ll5ycj

g6ll5ycj2#

你的意思是“它应该在客户端呈现,但它不是。"?您是否收到以下错误:“您正在导入一个需要useState的组件。它只能在客户端组件中工作,但它的父组件都没有标记为“使用客户端”,因此它们默认为服务器组件。了解更多信息:https://nextjs.org/docs/getting-started/react-essentials"?如果没有,并且当您单击按钮时计数器增加,则组件在客户端呈现
还有,你用的是最新版本的Next.JS吗?

u4vypkhs

u4vypkhs3#

如果您在layout.js文件中有<main></main>标记,请将其更改为<body></body,看看这是否解决了您的问题。如果不告诉我,你怎么调用你的onClick函数。
另一个解决方案:尝试通过运行以下命令更新nodejsnextjs
yarn add next@latest react@latest react-dom@latest
谢谢

bvpmtnay

bvpmtnay4#

我修复了这个问题,实际上我用旧的nvm版本安装了nodejs更新版本。我更新了我的nvm版本并安装了nodejs,它工作得很好。

相关问题