从回调中反应本机更改 state

Question

import React, {useState} from 'react';

import BackgroundGeolocation, {
  Location,
} from '@mauron85/react-native-background-geolocation';

const startBackgroundService = () => {
  
  BackgroundGeolocation.configure({
    desiredAccuracy: BackgroundGeolocation.HIGH_ACCURACY,
    stationaryRadius: 50,
    distanceFilter: 10,
    notificationTitle: 'Strings.Geolocation.NOTIFICATION_TITLE',
    notificationText: 'Strings.Geolocation.NOTIFICATION_DESCRIPTION',
    debug: false,
    startOnBoot: false,
    stopOnTerminate: true,
    locationProvider: BackgroundGeolocation.ACTIVITY_PROVIDER,
    interval: 1000,
    fastestInterval: 10000,
    activitiesInterval: 30000,
    stopOnStillActivity: false,
    notificationIconColor: '#4CAF50',
    notificationIconSmall: 'notification_icon',
  });

  BackgroundGeolocation.on('authorization', status => {
    if (status !== BackgroundGeolocation.AUTHORIZED) {
      
    } else if (status.hasPermissions) {
    
    }
  });

  BackgroundGeolocation.on('location', location => {
    BackgroundGeolocation.startTask(async taskKey => {
      console.log(location.longitude);
      console.log(location.latitude);
      //NEED HERE TO SET VALUE FOR loc from App()
      console.log(new Date());
      BackgroundGeolocation.endTask(taskKey);
    });
  }); 
  
  BackgroundGeolocation.start();  
};

startBackgroundService();

export default function App() {

  let [loc, setLoc] = useState('t');
  //NEED HERE TO DISPLAY loc WHICH I CHANGED FROM CALLBACK BackgroundGeolocation.on

  return (
    <SafeAreaView style={styles.container}>
      <Text>{loc}</Text>
      <Button title={'q'} />
    </SafeAreaView>
  );
}

Hello, I don't know how to change state variable in geolocation callback outside App(). I want to display the user's new location on the screen after it changes immediately in callback. Please, help. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Answer 1

You cannot access state outside a component, but..... there are three ways to do this (don't remember any more at the moment):

1. You can use the 'location' listener inside a useEffect in your App component like this:

   useEffect(() => { BackgroundGeolocation.on('location', location => { BackgroundGeolocation.startTask(async taskKey => { console.log(location.longitude); console.log(location.latitude); //NEED HERE TO SET VALUE FOR loc from App() console.log(new Date()); BackgroundGeolocation.endTask(taskKey); }); }); return () => { /// Here, I'd highly recommend you to unsubscribe to the listener } }, []);

2. You can a custom event emitter to emit updates whenver a location is received - this is helpful when you want to listen to update in several components. You can do it like:

   class LocationHandler extends EventEmitter {}

and then in your 'location' callback, you can use it like

LocationHander.emit('whatever name you want', location-data);

then inside your components, you need to listen to your LocationHandler like in the first step, using a useEffect, but don't forget to remove the event subscription.

3. Use a state management library like redux, jotai, recoil (the options are endless). But I'm not sure if it's a good idea to update the state from outside the components - it is totally possible tho.