Question

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

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

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

或者我应该忽略警告？

Answer 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也可以正常工作

Answer 2

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

components/NoSsr.js

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>

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

2 个答案: