React Capacitor返回键监听器无法获取最新state与props值怎么解决

问题根源 #

你遇到的问题是闭包捕获导致的：当前的useEffect依赖数组为空，只会在组件首次挂载时执行1次，内部注册的返回键监听器回调会捕获当时的初始state和props值，后续组件状态更新后，旧的回调闭包不会自动更新，所以永远读不到最新值。

解决方案 #

方案1：将用到的状态/属性加入useEffect依赖数组（最推荐，符合Hook规则） #

每次依赖的state.test或props.test更新时，自动卸载旧监听器、注册新的监听器，新回调就能捕获到最新值。同时建议存储监听器引用单独卸载，避免误删其他地方注册的同事件监听器。

React.useEffect(() => {
  // 存储监听器实例，用于后续精准卸载
  const backButtonListener = App.addListener("backButton", () => {
    alert(state.test)
    alert(props.test)
  })

  return () => {
    // 仅卸载当前组件注册的返回键监听器
    backButtonListener.remove()
  }
// 把回调中用到的所有变量加入依赖数组
}, [state.test, props.test])

优点是逻辑简单符合React官方Hook规范，不需要额外处理；Capacitor监听器注册开销极低，多次卸载注册基本无感知。

方案2：用useRef存储最新状态（适合依赖变量多的场景） #

用ref同步最新的状态和属性，监听器回调直接读取ref.current的值即可，不需要重复注册监听器。

// 新建ref用于同步最新的state和props
const latestValueRef = React.useRef({
  testState: state.test,
  testProps: props.test
})

// 每次state或props更新时同步到ref
React.useEffect(() => {
  latestValueRef.current = {
    testState: state.test,
    testProps: props.test
  }
}, [state.test, props.test])

// 注册监听器的useEffect不需要修改依赖
React.useEffect(() => {
  const backButtonListener = App.addListener("backButton", () => {
    alert(latestValueRef.current.testState)
    alert(latestValueRef.current.testProps)
  })

  return () => {
    backButtonListener.remove()
  }
}, [])

优点是只会注册一次监听器，适合回调依赖大量状态的场景；缺点是需要额外维护ref和状态的同步逻辑。

方案3：使用useEvent封装回调（React 18+ 专属方案） #

React 18 新增的useEvent钩子专门用于创建能始终访问最新state/props的事件回调，不需要处理依赖更新。

import { useEvent } from 'react'

// 用useEvent封装返回键处理逻辑，内部永远能拿到最新的state和props
const handleBackButton = useEvent(() => {
  alert(state.test)
  alert(props.test)
})

React.useEffect(() => {
  const backButtonListener = App.addListener("backButton", handleBackButton)
  return () => {
    backButtonListener.remove()
  }
}, []) // 不需要加任何依赖

代码最简洁，不需要维护依赖或ref，是React官方推荐的事件回调处理方案，但仅支持React 18及以上版本。

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