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

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 HooksuseState和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>