Прослушиватель событий React-Native не отменяется при переходе на другой экран

Я разработчик React, и я впервые имею дело с React-native. У меня возникла досадная проблема, с которой я застрял на 2 дня.

У меня есть этот компонент:

imports

const OrderDetails = ({route}) => {
  const {OrderNumber} = route.params;
  const [items, setItems] = useState(null);
  const navigation = useNavigation();

   useEffect(() => {
    const fetchItemDetails = async () => {
      try {
        const response = await axios.get(
          `http://192.168.X.XX:5000/orders/${OrderNumber}`,
        );
        setItems(response.data);
        const handleScannerStatus = data => {
          onBarcodeScan(data.data, response.data.items);
        };

        RegisterScanner(handleScannerStatus);
      } catch (error) {
        console.info('error fetching order');
      }
    };
    fetchItemDetails();

    return () => {
      console.info('component unmounted');
      UnregisterScanner();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [OrderNumber]);
  const onBarcodeScan = async (barcode, items) => {
    console.info("Scanning barcode from OrderDetails");
    const matchedProduct = items.find(item => barcode === item.tag);
    if (matchedProduct.Type === 'kit') {
      navigation.navigate('KitDetails', {
        OrderNumber,
        kit: matchedProduct,
      });
    } 
  };

  return (my jsx)
};

const styles = {...mystyles}
export default OrderDetails;

этот компонент в основном извлекает заказ и регистрирует событие, которое прослушивает отправку моего собственного модуля, и всякий раз, когда он находит элемент в заказе, который является комплектом, мы переходим к компоненту kitDetails, который выглядит следующим образом:

improts


const KitDetailsScreen = ({route}) => {
  const {OrderNumber, kit} = route.params;

  useEffect(() => {
    let handleScannerStatus = data => {
      console.info('Logging Barcode From KitDetails');
    };

    RegisterScanner(handleScannerStatus);

    return () => {
      console.info('unregister here');
      UnregisterScanner();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const tableHead = ['SKU', 'Fulfilled'];
  const tableData = kit.items.map(orderItem => [
    orderItem.sku,
    `${orderItem.Fulfilled}`,
  ]);

  return (jsx);
};

const styles = {...}
export default KitDetailsScreen;

Также я не думаю, что это будет иметь значение, но вот еще и прослушиватель событий:

import {NativeEventEmitter, NativeModules} from 'react-native';

const {BarcodeScannerModule} = NativeModules;
const eventEmitter = new NativeEventEmitter(BarcodeScannerModule);

export const RegisterScanner = handleScannerStatus => {
  eventEmitter.addListener('onBarcodeScanned', handleScannerStatus);

  BarcodeScannerModule.registerScannerStatusListener();
};

export const UnregisterScanner = () =>
  BarcodeScannerModule.unregisterScannerStatusListener();

Оба экрана выглядят очень похоже, но это не главное. Проблема здесь в том, что всякий раз, когда я перехожу к kitDetails, я все еще вижу console.infos из OrderDetails, я хочу, чтобы всякий раз, когда я перехожу к kitDetails, событие было отменено, и чтобы оно было доступно только в kitDetails, но навигация работает в странно, что он этого не делает.

Когда я начинаю сканирование внутри моего компонента kitDetails, вот результат:

 LOG  Logging Barcode From OrderDetails
 LOG  Logging Barcode From KitDetails
 LOG  Logging Barcode From OrderDetails
 LOG  Logging Barcode From KitDetails
 LOG  Logging Barcode From OrderDetails
 LOG  Logging Barcode From KitDetails

вместо этого он должен отображать только журнал KitDetails. Возможно, из-за того, что я новичок в React-native и что-то упускаю или не совсем понимаю, как работает поток, было бы неплохо дать мне несколько советов. При необходимости я также могу предоставить свой собственный код модуля.

То, что я пробовал и не сработало:

1. переключение представлений внутри одного и того же компонента, но в моем случае это не работает.
2. Отмена регистрации прямо перед переключением навигации.
3. Зная тот факт, что размонтирование является асинхронным, я попытался добавить setTimeout к регистрации внутри kitDetails, но все равно смог увидеть журнал консоли обоих компонентов. Спасибо за внимание.