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

Posted 2021-03-19

我正在构建一个 next.js 应用，生成一些随机数，从而产生警告。

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

我想我明白为什么会收到这个警告（虚拟DOM与服务器发送的内容有点不同步）。我只是想知道是否有办法让next.jsReact知道这种情况下是可以的。还是有办法只在服务器上生成随机的，让客户端使用这个作为文字？

或者我应该忽略这个警告？

答案

将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 应该也行