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

Posted 2023-02-22

【中文标题】Next.js/React 在组件中生成随机值时发出警告

【英文标题】：Next.js/React warning when generating random values in a component

【发布时间】：2018-05-12 09:40:10

【问题描述】：

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

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

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

还是我应该忽略警告？

【问题讨论】：

您在哪个上下文/方法中创建随机值？

@F***Schultz 组件构造函数。

也有同样的问题 - 链接的“生成”值（这是预期的），但找不到任何解决方案来从我的控制台中删除该警告

对于 nextjs 的问题，我建议去spectrum.chat 并在那里询问，因为那里的很多开发人员都使用next.js

@Koen 感谢您的回复。我找到了一种解决方法。不理想，但至少没有更多警告。 ***.com/a/59976790/1526406

【参考方案1】：

将 javascript 随机变量移动到 React 状态为我解决了这个问题。

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

function RandomNumber() 
  const randomNumber = Math.floor(Math.random() * 100);
  return <p>randomNumber</p>;

之后

function RandomNumber() 
  const [randomNumber, setRandomNumber] = useState(undefined);

  useEffect(() => 
    setRandomNumber(Math.floor(Math.random() * 100));
  , []);

  return <p>randomNumber</p>;

我的代码使用了 React Hooks useState 和 useEffect，但之前的 React 生命周期方法 setState 和 componentDidMount 也应该可以正常工作

【参考方案2】：

我的建议是将包含一些随机生成的内容的内容包装在一个组件内。

components/NoSsr.js

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

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

export default dynamic(() => Promise.resolve(NoSsr), 
  s-s-r: false,
);

然后在你的文件中：

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