react-native - 类型错误 : undefined is not an object (evaluating 'subscription[nativeEmitterSubscriptionKey]' ) when using animated spinner

Question

我正在使用 Expo 编写我的应用程序和 react native 。我开始使用react-native-animated-loader ， lottie-react-native 的包装器，我遇到了一个奇怪的问题。问题是我偶尔会遇到一些奇怪的错误。它并不总是可以重现，但我偶尔会得到它。它看起来像是最终一致性或竞争条件问题。

TypeError: undefined is not an object (evaluating 'subscription[nativeEmitterSubscriptionKey]')

This error is located at:
    in NavigationContainer (at App.js:280)
    in Provider (at App.js:279)
    in Provider (at App.js:278)
    in Provider (at App.js:277)
    in Provider (at App.js:276)
    in Provider (at App.js:275)
    in Provider (at App.js:274)
    in Provider (at App.js:273)
    in RCTView (at View.js:34)
    in View (created by MenuProvider)
    in RCTView (at View.js:34)
    in View (created by MenuProvider)
    in MenuProvider (at App.js:272)
    in Provider (at App.js:271)
    in Provider (at App.js:270)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at App.js:269)
    in _default (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

这是我的代码:

import React, { useEffect } from 'react';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';
import AnimatedLoader from "react-native-animated-loader";

const Loader = ({ visible }) => {

    return (
        <View style={styles.container}>
            <AnimatedLoader
                visible={visible}
                overlayColor="rgba(255,255,255,0.75)"
                source={require("../../assets/loader-strange.json")}
                animationStyle={styles.lottie}
                speed={1}
            >
                {/* <Text>Doing something...</Text> */}
            </AnimatedLoader>
        </View>
    )
};

const styles = StyleSheet.create({
    lottie: {
        width: 100,
        height: 100
    }
});

export default Loader;

如果我使用 native Lottie 库，也会发生同样的情况:

import React, { useEffect } from 'react';
import {
    StyleSheet,
    View,
    Animated,
    Easing
} from 'react-native';
import LottieView from 'lottie-react-native';

const Loader = ({ visible }) => {
    const progress = new Animated.Value(0);

    useEffect(() => {
        Animated.timing(progress, {
            toValue: 1,
            duration: 5000,
            easing: Easing.linear,
        }).start();
    }, [])

    return (
        <View style={styles.container}>
            <LottieView
                source={require('../../assets/loader-strange.json')}
                progress={progress}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    lottie: {
        width: 100,
        height: 100
    }
});

export default Loader;

然后我在我的一个屏幕上使用它:

import React, { useEffect, useState, useContext, useRef } from 'react'
import {
    Text,
    FlatList,
    View,
    StyleSheet,
    RefreshControl
} from 'react-native';
...
import Loader from '../../components/Loader';

const InteractionsScreen = ({ navigation }) => {

    return (
        <View style={styles.container}>
            ...
            <Loader visible={true} />
            ...
        </View>
    );
}

const styles = StyleSheet.create({
    ...
});

export default InteractionsScreen;

为了重现它，我必须刷新应用程序几次，然后我收到此错误。我尝试用谷歌搜索这个错误，但找不到任何有意义的东西。

Answer 1

在您的堆栈跟踪中，代码库中的代码行位于 App.js 中的第 280 行。您尚未显示该文件，但我可以猜测它与复制的推送通知代码有关从世博会的此文档页面:https://docs.expo.dev/push-notifications/overview/ .

return () => { 
  Notifications.removeNotificationSubscription(notificationListener.current);
  Notifications.removeNotificationSubscription(responseListener.current);
};

您只想在参数不未定义时调用这两个函数，如下所示:

return () => { 
  if (notificationListener.current) {
    Notifications.removeNotificationSubscription(notificationListener.current);
  }

  if (responseListener.current) {
    Notifications.removeNotificationSubscription(responseListener.current);
  }
};

同样的事情也发生在我身上，代码之前运行得很好，直到突然不行了。