React Navigation RangeError：超出最大调用堆栈大小（本机堆栈深度）答案

【问题标题】：React Navigation RangeError: Maximum call stack size exceeded (native stack depth)React Navigation RangeError：超出最大调用堆栈大小（本机堆栈深度）
【发布时间】：2021-12-28 18:23:05
【问题描述】：

所以我有一个希望用户停留的屏幕。如果他想离开，我希望他进入特定屏幕。如果我这样做：

  useEffect(() => {
    navigation.addListener("beforeRemove", (e) => {
      e.preventDefault()
      navigation.popToTop()
    })
  }, [navigation])

我收到此错误：RangeError: Maximum call stack size exceeded (native stack depth)

即使我将navigation.popToTop() 更改为其他内容（例如navigation.navigate("Account")），我也会收到同样的错误：/

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

代码中的最后一个数组是 useEffect “依赖数组”，这意味着只要该数组中的任何内容发生更改，useEffect 就会运行。将侦听器添加到导航对象会更改对象，因此您要么添加无限数量的侦听器，要么循环替换现有的侦听器（我不确定navigation.addListener 是如何实现的）。

您需要执行以下操作之一：

检查此代码块中是否存在侦听器，如果不存在则仅添加
确保此添加代码只执行一次

【讨论】：