在组件中生成随机值时的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也应该可以正常工作