Question

我有一个应用程序，在useEffect内，我根据Permissions.getAsync(Permissions.LOCATION);的结果触发一个显示模式，当登录后的输入屏幕首次显示时，它显示以下错误：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function,

但是，此应用程序的所有后续打开均正常，并且不会出错。我对MainScreen的代码如下：

import React, { useEffect, useCallback, useState } from 'react';
import { View, StyleSheet, Platform, Alert } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

import LocationTrackingModal from '../components/Modals/LocationTrackingModal';

const MainScreen = props => {

    const [gameModalVisibile, setGameModalVisible] = useState(false);
    const [locationTrackingModal, setLocationModalTrack] = useState(false); // will show for first time 
    const [locationPermission, setLocationPermission] = useState('undetermined');

    const { user } = useSelector(state => state.auth);
    const dispatch = useDispatch();


    const toggleLocationModal = useCallback(() => {
        setLocationModalTrack(!locationTrackingModal);
    }, [locationTrackingModal]);

    useEffect(() => {
        console.log('useEffect 1!')
        const locationPermissionOnboarding = async () => {
            let result = await Permissions.getAsync(Permissions.LOCATION);
            //setLocationPermission(result.status);
            if(result.status === 'undetermined' ) { //need to ask for permission if/o/if undetermined
                setLocationModalTrack(true);
            }
        }

        locationPermissionOnboarding();
    }, []);

    useEffect(() => {
        console.log('useEffect 2!')
        const getCurrentPosition = async () => {
            const hasPermission = await Permissions.getAsync(Permissions.LOCATION);  //ask one more time for permission
            if(hasPermission.status !== 'granted') return; //TODO: if current location is not enabled then make sure that is known on map screen
            try {
                const location = await Location.getCurrentPositionAsync({ 
                    timeout: 10000
                });

                //TODO: Something with location
                console.log(location)
            } catch(err) {
                Alert.alert(
                    'Could not fetch current location!',
                    'Check network connection...',
                    [{ text: 'Okay!'}]
                );
            }
        }
        getCurrentPosition();
    }, [locationPermission]);

    return (
        <View style={styles.container}>
            <LocationTrackingModal isVisible={locationTrackingModal} hideModal={toggleLocationModal} permissionTrigger={setLocationPermission} />

            ...
        </View>
    );
}

export const mapScreenOptions = (navData) => {
    return {
        headerTitle: () => (
            <HeaderToggle navData={navData} activeButtonLeft={true}/>
        ), 
        headerLeft: () => (
            <View>
                <HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
                    <Item title="menu" iconName="ios-menu" onPress={() => {
                        navData.navigation.toggleDrawer()
                    }} />
                </HeaderButtons>
            </View>
        ),
        headerTransparent: true,
        headerStyle: {
            backgroundColor: 'transparent', 
        },        
    }
}

export default MainScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    map: {
        flex: 1,
        width: '100%',
        height: '100%',
        zIndex: -1
    },
    customCallout: {
        height: 300,
        width: screenWidth - 25,
    },
});

不知道我使用useEffect挂钩的方式是否有问题。有任何想法/帮助吗？

触发Modal以显示在useEffect挂钩中的问题

0 个答案: