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

Question

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

Warning: Text content did not match. Server: "1" Client: "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 应该可以工作也不错