在使用条件下对设置状态做出反应

Question

我试图避免在React Native中多次显示警报。 为此，我正在尝试在useEffect内的条件内更新状态：

const [permissionStatus, setPermissionStatus] = useState('');
const [permissionsAlertShown, setPermissionsAlertShown] = useState(false);
useEffect(() => {
  function handleAppStateChange() {
    if (
      AppState.currentState === 'active' &&
      permissionStatus === 'denied' &&
      !permissionsAlertShown
    ) {
      setPermissionsAlertShown(true);
      Alert.alert(
        ...
      );
    }
  }
  AppState.addEventListener('change', handleAppStateChange);
}, [permissionStatus, permissionsAlertShown]);

我的问题是，如果我离开我的应用程序并返回到它，则AppState.currentState会更改，并且由于setPermissionsAlertShown(true)被忽略，因此再次向我显示警报。

如何处理这种情况？

Answer 1

答案是创建一个回调函数，该函数将删除侦听器。如果有人找我，我会分享。

const [permissionStatus, setPermissionStatus] = useState('');
const [permissionsAlertShown, setPermissionsAlertShown] = useState(false);
const handleAppStateChange = useCallback(() => {
    if (
      AppState.currentState === 'active' &&
      permissionStatus === 'denied' &&
      !permissionsAlertShown
    ) {
      setPermissionsAlertShown(true);
      Alert.alert(
        ...
      );
    }
}, [permissionStatus, permissionsAlertShown]);
useEffect(() => {
  AppState.addEventListener('change', handleAppStateChange);
  return () => AppState.removeEventListener('change', handleAppStateChange);
}, [handleAppStateChange]);

Answer 2

您只需要使用或其他存储来保持状态。

理想的情况是使用操作的持久性（启用权限，保存API数据等）。