Android端AppState结合Redux Toolkit时API持续重复调用问题

在React Native开发中，通过AppState监听应用返回前台的时机，触发对应API请求与Redux dispatch操作，iOS端运行完全正常，Android端出现API被持续触发无法停止的问题；注释Redux相关dispatch代码后，Android端功能恢复正常，无持续刷新异常。
原有实现代码如下：

useEffect(() => {
 const subscription = AppState.addEventListener("change", (nextAppState) => {
 if (
 appState.current.match(/inactive|background/) &&
 nextAppState === "active"
      ) {
 getTimes();
 dispatch(getLocation());
 dispatch(getCity());
      }

 appState.current = nextAppState;
 setAppStateVisible(appState.current);
    });

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

• Android与iOS的AppState事件触发逻辑存在差异：iOS端inactive状态仅在应用切后台过渡、系统来电等少数场景触发，而Android端弹出系统权限弹窗（比如代码中getLocation对应的定位权限申请弹窗）、其他系统级弹窗时，应用会短暂进入inactive状态，弹窗关闭回到应用时又会触发active事件。
• 原有逻辑将inactive状态作为触发前台回调的判定条件，会形成死循环：应用回到active→触发dispatch调用定位/城市接口→触发定位权限弹窗→应用进入inactive→关闭弹窗回到active→再次触发dispatch，循环往复导致API持续调用。
• 原有逻辑没有加重复触发拦截，短时间内连续触发的AppState事件会重复执行业务逻辑。

• 调整状态判定规则：仅当应用上一个稳定状态为background（即真的切到后台再返回）时，才触发前台加载逻辑，忽略inactive这类临时状态导致的伪前台回调。
• 增加执行锁：通过ref标记回调执行状态，同一时间只允许一个前台回调逻辑执行，执行完成后短时间内拦截重复触发，避免连续事件导致重复调用。
• 解耦权限申请与前台回调：在调用需要权限的接口（比如定位）前，先判断权限是否已经授予，已授权场景直接请求数据，不要重复触发权限申请弹窗，从根源避免系统弹窗导致的状态循环。

修正后的参考代码：

import { useEffect, useRef } from 'react';
import { AppState } from 'react-native';
import { useDispatch } from 'react-redux';
// 引入业务依赖：getTimes、getLocation、getCity等action/方法

// 组件内部
const appState = useRef(AppState.currentState);
// 新增执行锁，防止重复触发
const isForegroundProcessing = useRef(false);

useEffect(() => {
  const handleAppStateChange = (nextAppState) => {
    // 正在处理前台逻辑时直接拦截重复事件
    if (isForegroundProcessing.current) return;

    // 仅当之前处于后台、当前回到活跃状态时，才执行业务逻辑
    if (appState.current === 'background' && nextAppState === 'active') {
      isForegroundProcessing.current = true;
      // 执行业务请求
      getTimes();
      dispatch(getLocation());
      dispatch(getCity());
      // 延迟1秒释放锁，覆盖短时间内连续状态变更的场景
      setTimeout(() => {
        isForegroundProcessing.current = false;
      }, 1000);
    }

    // 仅记录active/background这类稳定状态，忽略inactive临时状态，避免干扰判定
    if (['active', 'background'].includes(nextAppState)) {
      appState.current = nextAppState;
      setAppStateVisible(appState.current);
    }
  };

  const subscription = AppState.addEventListener('change', handleAppStateChange);
  return () => subscription.remove();
}, []);

补充说明：如果getLocation、getCity逻辑中包含权限申请流程，需要额外加权限前置判断，已授权场景直接拉取数据，未授权场景再走权限申请流程，避免每次回前台都弹出系统权限弹窗打断应用状态。

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