reactjs NextJS 13中的React组件渲染两次,即使reactStrictMode设置为false

xxe27gdn  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(261)

这是组件:

'use client';

export default async function Wallet({params}) {

    console.log("params", params);
    //const time = { datetime: new Date().getTime() };
    const time = { datetime: "Foo!" };
    console.log(">>>", time);

    return (
        <div>
            Wallet!
            Time <pre>{time.datetime}</pre>
            <br />

        </div>
    )
}

它位于动态路由/w/:id下,如下所示:

当我在浏览器上使用next dev时,控制台日志语句根据Chrome控制台运行两次:

现在,我知道reactStrictMode的行为,我在next.config.js中选择退出,如下所示:

const nextConfig = {
  experimental: {
    appDir: true,
  },
  reactStrictMode: false
}

module.exports = nextConfig

如果我删除它,组件渲染3次!
由于我是React/Next的新手,我很确定我正在做一些使应用程序不稳定的事情,但我不知道是什么。事实上,如果我注解将时间设置为常量对象{ datetime: foo }的行,并替换为像{ datetime: new Date().getTime() }这样的动态对象,应用程序开始抛出错误,但只有当我手动刷新它时:

作为一个额外的问题,为什么我在我的服务器终端上看到控制台输出,“使用客户端”不是应该告诉Next组件只应该在浏览器中呈现吗?顺便说一下,在服务器上,控制台日志只打印一次。

pgvzfuti

pgvzfuti1#

你的实现有很多问题,比如:

  • 不需要使页面组件异步,因为它不是一个异步函数,而是一个简单的同步JavaScript函数。
  • 你没有从任何地方传递参数,因此它是未定义的。如果你想得到参数,你可能想使用路由器。
  • 在react中,当状态没有改变或者其他东西没有导致重新渲染时,组件不会重新渲染。即使重新呈现,它也只会呈现受状态更改影响的内容,但是在返回之前的函数体中的任何内容都会在任何更改时运行。在您的例子中,时间对象的更改导致它再次控制台记录它。

相关问题