React Native中监听回调无法移除的原因排查求助

核心问题：const 声明的变量无法重新赋值 #

你的代码里第一个致命问题是用 const 声明了 scanListeners 数组，但在 removeListener 里直接尝试重新赋值：

scanListeners = scanListeners.filter(listenerCallback => listenerCallback !== callback)

在JavaScript中，const 声明的变量（不管是基本类型还是引用类型）不允许改变变量本身的引用。数组是引用类型，filter 方法会返回一个新数组，你试图把这个新数组赋值给 const 声明的 scanListeners，这会直接抛出 TypeError。

为什么看不到第二个日志和报错？ #

调用代码里用了 try/catch 块，但捕获错误后没有任何输出：

try {
  Component.removeListener(listener);
}
catch { }

removeListener 执行到赋值那一行时抛出错误，被这个 catch 块吞掉了，所以你看不到错误信息，同时第二个 console.log("Listener removed") 因为报错中断，根本没机会执行。

监听没被移除的原因 #

因为赋值操作失败，原 scanListeners 数组完全没被修改，之前添加的监听函数还在数组里，所以后续依然会被调用。

修复方案 #

有两种常见的修复方式：

1. 将 const 改为 let

允许重新赋值变量引用，这样 filter 返回的新数组能正常替换原数组：

let scanListeners = []
...
function removeListener(callback) {
    console.log("About to remove listener")
    scanListeners = scanListeners.filter(listenerCallback => listenerCallback !== callback)
    console.log("Listener removed")
}

2. 保留 const，直接修改原数组

用 findIndex 找到目标监听的索引，再用 splice 删除元素，避免修改变量引用：

const scanListeners = []
...
function removeListener(callback) {
    console.log("About to remove listener")
    const targetIndex = scanListeners.findIndex(listener => listener === callback)
    if (targetIndex !== -1) {
        scanListeners.splice(targetIndex, 1)
    }
    console.log("Listener removed")
}

额外建议 #

调试时别吞掉错误，在 catch 里加上错误输出，方便排查问题：

try {
  Component.removeListener(listener);
} catch (err) {
  console.error("移除监听失败:", err)
}

内容的提问来源于stack exchange，提问作者Andy Victors