React native react native中的应用程序状态不会删除侦听器

我以以下方式添加了侦听器（尝试同时放入构造函数和componentDidMount）： AppState.addEventListener（'change'，this.\u handleAppStateChange）

并且在componentWillUnmount方法中以以下方式删除侦听器：

AppState.removeEventListener（'change'，this.\u handleAppStateChange）

在回调函数中：

  _handleAppStateChange = (nextAppState) => {
    setTimeout(() => {
      alert('App state: ' + this.state.appState);
      alert('Next App state: ' + nextAppState);
    }, 0);
  }

它会多次发出警报。 它不会删除一次配置的侦听器。

---

如果有人知道，请告诉我？

您必须从

组件中删除侦听器将卸载

功能

componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

---

设置状态是一个异步进程。因此，在componentWillUnmount中，不要将其用作组件获取unmount，对于该场景，设置状态仍在处理中，从而导致警报。

可能是由于您正在侦听的函数发生了更改

this.props.navigation.addListener(
  'didFocus',
  () => {
    AppState.addEventListener('change', this.handleAppStateChange)
  }
)
this.props.navigation.addListener(
  'willBlur',
  () => {
    AppState.removeEventListener('change', this.handleAppStateChange)
  }
)

它工作正常

this.props.navigation.addListener(
  'didFocus',
  () => {
    AppState.addEventListener('change', this.handleAppStateChange.bind(this))
  }
)
this.props.navigation.addListener(
  'willBlur',
  () => {
    AppState.removeEventListener('change', this.handleAppStateChange.bind(this))
  }
)

它不起作用 所以也许你需要这样

this.handleAppStateChange = this.handleAppStateChange.bind(this)

---

在您的构造函数中，我假设您使用的是代码外观上的类组件。我最终解决这个问题的方法是创建一个指针函数，指向

this

范围内的实际函数，而不使用

.bind（this）

例如

//实际函数
handleAppStateChange（状态）{
//施展你的魔法！
}
//指针
handleAppStateChangeCall=（状态）=>this.handleAppStateChange（状态）；
//设置侦听器事件
setupAppStateListener（）{
AppState.addEventListener（“更改”，this.handleAppStateChangeCall）；
}
//清除侦听器事件
clearAppStateListener（）{
AppState.addEventListener（“更改”，this.handleAppStateChangeCall）；
}
//挂钩
componentDidMount（）{
setupAppStateListener（）；
}
//卸钩
组件将卸载（）{
clearAppStateListener（）
}

最近几天面临着同样的问题。 我最终通过将我的应用程序状态管理导出到我的app.js组件并创建一个服务管理器来管理它

下面是我的

App.js

的外观：

从“react native”导入{AppState}；
将{AppStateService}从“您的路径”导入到下一个文件；
导出默认函数App（）{
//收听应用程序状态
AppStateService.init（）；
useffect（（）=>{
AppState.addEventListener（'change'，AppStateService.getInstance（）.handleAppStateChange）；
返回（（）=>{
AppState.removeEventListener（'change'，AppStateService.getInstance（）.handleAppStateChange）；
})
}, []);
返回（/*呈现内容（导航、错误边界，*/）；
}

AppStateService.js

：

/**
*类以允许我们引用应用程序状态服务
*/
导出类AppStateService{
静态实例；
静态_ACTIVE=‘ACTIVE’；
静态_非活动=‘非活动’；
静态_背景='背景'；
静态未启动='未启动'；
previousState=AppStateService.STATE\u未启动；
currentState=AppStateService.STATE\u处于活动状态；
处理器={}；
appLaunchId=0；
/**
*@returns{AppStateService}
*/
静态getInstance（）{
如果（！this.instance）{
this.instance=新的AppStateService（）；
}
返回此.instance；
}
静态初始化=（）=>{
//这个func需要在App.js中调用，它只是在这里创建实例
const instance=AppStateService.getInstance（）；
instance.appLaunchId=new Date（）.getTime（）/1000；
}
HandLeapStateChange=（nextState）=>{
if（nextState！==此.currentState）{
this.previousState=this.currentState；
this.currentState=nextState；
for（Object.entries（this.handlers））的常量[key，handler]{
处理程序（下一个状态）；
}
}
}
getCurrentState=（）=>{
返回此.currentState；
}
getPreviousState=（）=>{
返回this.previousState；
}
addStateHandler=（键，处理程序）=>{
this.handlers[key]=handler；
}
hasStateHandler=（键）=>{
if（this.handlers[key]）{
返回true；
}
返回false；
}
removeStateHandler=（键）=>{
删除这个.handlers[key]；
}
}

现在，您可以在应用程序组件中的任意位置调用它：

导出默认类RandomComponent扩展React.Component{
componentDidMount（）{
//检查应用程序是否正在运行背景
this.handlappstatechange=this.handlappstatechange.bind（this）；
AppStateService.getInstance（）.addStateHandler（'myListenerCustomKey'，this.handleAppStateChange）；
}
组件将卸载（）{
//删除应用程序状态更改侦听器
AppStateService.getInstance（）.removeStateHandler（'myListenerCustomKey'）；
}
HandLeapStateChange=（nextAppState）=>{
log（“我将成为-”+nextapstate+”，而我是-“+AppStateService.getInstance（）.getPreviousState（）+”-”；
}
}

---

通过这种方式，您可以在应用程序中的任何地方监听应用程序的前台/非活动/后台状态，并正确订阅/取消订阅这些事件。

我使用了相同的方式。它仍然不起作用。多次显示警报。那么，您有何建议，如何取消注册？我还遇到了multip的一个问题le listeners，但只有在我多次启动应用程序时才会发生