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

我正在构建一个 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 useStateuseEffect但之前的React生命周期方法 setStatecomponentDidMount 应该也行

给TA打赏
共{{data.count}}人
人已打赏
解决方案

在Monogo数据库中查询子文档

2022-4-22 12:08:52

解决方案

Spring Cloud Stream功能手册确认 - KafkaHeaders.ACKNOWLEDGMENT不可用。

2022-4-22 12:08:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索