Javascript Next.js/React在组件中生成随机值时发出警告

我正在构建一个next.js应用程序，它会生成一些随机数，从而生成警告：

警告：文本内容不匹配。服务器：“1”客户端：“2”

我想我理解为什么会收到这个警告（虚拟DOM与服务器发送的内容有点不同步）。我只是想知道是否有办法让next.js/React知道在这种情况下这是可以的。或者有没有办法只在服务器上生成随机数，让客户端将其用作文本

---

还是应该忽略警告？

将JavaScript随机变量移动到React状态为我解决了问题

这是我之前的问题（简化）：

函数RandomNumber（）{
const randomNumber=Math.floor（Math.random（）*100）；
返回{randomNumber}
；
}

之后

函数RandomNumber（）{
常量[randomNumber，setRandomNumber]=使用状态（未定义）；
useffect（（）=>{
setRandomNumber（Math.floor（Math.random（）*100））；
}, []);
返回{randomNumber}
；
}

---

我的代码使用了React Hooks

useState

和

useffect

，但是以前的React生命周期方法

setState

和

componentDidMount

也应该可以很好地工作

我建议您将一些随机生成的内容包装到组件中

components/NoSsr.js

import dynamic from 'next/dynamic';
import React from 'react';

const NoSsr = ({ children }) => <>{children}</>;

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false,
});

从“下一个/动态”导入动态；
从“React”导入React；
const NoSsr=（{children}）=>{children}；
导出默认动态（（）=>Promise.resolve（NoSsr）{
ssr：错，
});

然后在您的文件中：

<NoSsr>
    { Math.random() }
</NoSsr>

{Math.random（）}

您是在哪个上下文/方法中创建随机值的？@Fabianshultz组件构造函数。也有同样的问题-为链接“生成”值（这是有意的），但找不到任何解决方案从我的控制台中删除该警告对于nextjs问题，我建议转到spectrum.chat并在那里提问，因为很多开发人员都在使用next。js@Koen谢谢你的回复。我找到了一个解决办法。不理想，但至少没有更多的警告。

import dynamic from 'next/dynamic';
import React from 'react';

const NoSsr = ({ children }) => <>{children}</>;

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false,
});

<NoSsr>
    { Math.random() }
</NoSsr>