如何使用 UseEffect 退出？

Question

//注销屏幕

import {Alert} from 'react-native';
import {useEffect} from 'react';
import {useIsFocused} from '@react-navigation/native';
const Logout = props => {
  const Logout1 = () => {
    const isFocused = useIsFocused();
    Alert.alert('Logout', 'Are you sure you want to logout?', [
      {
        text: 'Cancel',
        onPress: () =>
          props.navigation.navigate(
            'Tabs',

            {
              screen: 'HomeScreen',
            },
          ),
      },
      {text: 'Yes', onPress: () => props.navigation.navigate('Login')},
    ]);
  };
  useEffect(() => {}, [useIsFocused(), Logout1()]);
};
export default Logout;

我期待 1 次

 Alert.alert

但它弹出 2 次 1=> 当单击底部选项卡中的注销时 2=> 当我按下取消并将我导航到另一个屏幕并再次弹出时

Answer 1

你必须在useEffect中使用isFocused

import { Alert } from 'react-native';
import { useEffect } from 'react';
import { useIsFocused } from '@react-navigation/native';
const Logout = props => {
  const isFocused = useIsFocused(); // ----- edit
  const Logout1 = () => {
    Alert.alert('Logout', 'Are you sure you want to logout?', [
      {
        text: 'Cancel',
        onPress: () =>
          props.navigation.navigate(
            'Tabs',

            {
              screen: 'HomeScreen',
            },
          ),
      },
      { text: 'Yes', onPress: () => props.navigation.navigate('Login') },
    ]);
  };
  useEffect(() => {Logout1() }, [isFocused]); // ----- edit
};
export default Logout;