TypeError: null不是对象(计算'dispatcher.useState') WebView useState错误

Question

TypeError: null不是一个对象(计算'dispatcher.useState')

此错误位于：

在WebViewModal in RCTView (由视图创建) in View (由Login创建)在PortalProvider in WebViewModalProvider (由Login创建)在RCTView (由视图创建)在视图中(由视图创建)在视图中(由ScrollView创建)在RCTScrollView中(由ScrollView创建)在ScrollView中(由ScrollView创建)在ScrollView中(由AnimatedComponent创建)在AnimatedComponent in AnimatedComponentWrapper (由NativeViewGestureHandler创建)在NativeViewGestureHandler in AnimatedComponentWrapper (由视图创建)、在视图中in (由创建)、在in (由视图创建)中视图(由KeyboardAvoidingView创建) KeyboardAvoidingView (由AnimatedComponent创建)在AnimatedComponent in AnimatedComponentWrapper in RCTView (由视图创建)视图(由TapGestureHandler创建)在TapGestureHandler in RCTView (由视图创建)在View in ModalizeBase (由Login创建)在RCTView (由视图创建)在视图中(由KeyboardAvoidingView创建)在KeyboardAvoidingView(由Login创建)，Login(由SceneView创建)在StaticContainer (由SceneView创建)，在(由视图创建)，在视图中(由# in 20#创建)，在# in 21#(由视图创建)，在视图中创建(由创建))在RCTView (由视图创建)在视图中(由CardSheet创建)、RCTView (由视图创建)、视图(由AnimatedComponent创建)、AnimatedComponent in AnimatedComponentWrapper (由PanGestureHandler创建)、PanGestureHandler (由PanGestureHandler创建)、PanGestureHandler(由卡创建)、RCTView (由视图创建)、RCTView (由视图创建)、RCTView(由AnimatedComponent创建)、AnimatedComponent in AnimatedComponentWrapper (由卡片创建)、RCTView(由视图创建)、在视图(由卡片创建)、RCTView(由RCTView创建)、CardContainer (由RCTView创建)、CardContainer(由RCTView创建)、in (由创建)、in 20# in (由创建))在Suspender (由冻结创建)、冻结(由DelayedFreeze创建)、DelayedFreeze(由InnerScreen创建)、InnerScreen(由屏幕创建)、屏幕(由MaybeScreen创建)、MaybeScreen(由CardStack创建)、RNSScreenContainer (由ScreenContainer创建)、ScreenContainer(由MaybeScreenContainer创建)、MaybeScreenContainer(由CardStack创建)、RCTView (由视图创建)(由背景创建)、CardStack(由CardStack创建)、CardStack(由MaybeScreen创建)、(由in 20#创建)、(由en22#创建)、RCTView(由视图创建)(由背景创建)、MaybeScreen(由MaybeScreen创建)、MaybeScreen(由CardStack创建)、RNSScreenContainer(由ScreenContainer创建)、ScreenContainer(由MaybeScreenContainer创建)、MaybeScreenContainer(由视图创建)(由背景创建)、RCTView(由CardStack创建)、CardStack(由MaybeScreen创建)、(由in 20#创建)、# in 21#(由in 22#创建)在RNGestureHandlerRootView (由GestureHandlerRootView创建)在GestureHandlerRootView(由StackView创建)在StackView(由StackNavigator创建)在PreventRemoveProvider (由NavigationContent创建)在NavigationContent中(由StackNavigator创建)在StackNavigator(由MainNavigator创建)在MainNavigator(由应用程序创建)在EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider (由应用程序创建)在应用程序(由应用程序创建)在应用程序(由视图创建)在(由视图创建)中(由# in 20#创建)在(由视图创建)在视图中(由创建)，在中()

import * as React from 'react';
import { useState, useRef, useCallback } from 'react';
import {
    Text, StyleSheet,
    KeyboardAvoidingView, ScrollView, Image,
    TextInput, TouchableOpacity, View, SafeAreaView,
    Linking, Modal
} from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from 'react-native-vector-icons'
import { useNavigation } from '@react-navigation/native';
import { Modalize } from 'react-native-modalize';
import WebViewModalProvider, { WebViewModal } from
    'react-native-webview-modal';


const Login = () => {
    const [input, setInput] = useState('');
    const [hidePass, setHidePass] = useState(true);
    const [ischecked1, setIschecked1] = useState(true);
    const [visible, setVisible] = useState(false);
    const modalizeRef = useRef(null);

    const navigation = useNavigation();

    function onOpen() {
        modalizeRef.current?.open();
    }

    return (

        <KeyboardAvoidingView
            style={styles.container}
        >
            **<Modalize
                ref={modalizeRef}
                snapPoint={500}
            //handlePosition="inside"
            >
                <View style={{
                    flex: 1, height: 500,
                    flexDirection: 'row', justifyContent: 'center'
                }}>
                    <WebViewModalProvider>
                        <View style={{ margin: 30, height: 500 }}>
                            <SafeAreaView />
                            <WebViewModal
                                visible={true}
                                source={{ uri: "https://account.activedirectory.windowsazure.com/ChangePassword.aspx" }}
                                style={{ margin: 10 }}
                            />
                        </View>
                    </WebViewModalProvider>
                </View>
            </Modalize>**

            <ScrollView>

                <Image
                    source={require('../../assets/logo.png')}
                    style={styles.logo}
                />
                <Text style={styles.helloText}>
                    Olá de novo !
                </Text>
                <Text style={styles.welcomeText}>
                    Bem-vindo(a) de volta,
                    sentimos sua falta!
                </Text>

                <TextInput
                    style={styles.inputArea}
                    placeholder="Digite o e-mail"
                />
                <TextInput
                    style={styles.inputArea}
                    placeholder="Senha"
                    value={input}
                    onChangeText={(texto) => setInput(texto)}
                    secureTextEntry={hidePass}
                />
                <TouchableOpacity style={styles.eye} onPress={() => setHidePass(!hidePass)}>
                    <Ionicons name={hidePass ? 'eye' : 'eye-off'}
                        color="#A0D800" size={25}
                    />
                </TouchableOpacity>
                <View style={styles.checkBoxStyle}>
                    <CheckBox
                        left
                        size={18}
                        checkedColor='#A0D800'
                        value={ischecked1}
                        checked={ischecked1}
                        onPress={() => setIschecked1(!ischecked1)}

                        containerStyle={{
                            backgroundColor: "transparent",
                            borderColor: "transparent", marginRight: 0
                        }}
                    />
                    <TouchableOpacity onPress={() => setIschecked1(true)}>
                        <Text style={styles.Connected}>
                            Manter-se conectado
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity //onPress={() => 
                        // Linking.openURL('https://account.activedirectory.windowsazure.com/ChangePassword.aspx')}
                        onPress={onOpen}>
                        <Text style={styles.forgotPassword}>
                            Esqueci minha senha
                        </Text>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    style={styles.botao}
                    onPress={() => navigation.navigate("TabNavigator")}
                >
                    <Text style={styles.botaoText}>Entrar</Text>
                </TouchableOpacity>


            </ScrollView>
        </KeyboardAvoidingView>
    );

}
const styles = StyleSheet.create({
    container: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    logo: {
        marginTop: 50,
        marginBottom: 80,
        width: 150,
        height: 40,

    },
    inputArea: {
        marginTop: 30,
        padding: 15,
        height: 60,
        width: 370,
        borderColor: '#808080',
        borderWidth: 1,
        backgroundColor: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
        borderRadius: 15
    },
    botao: {
        width: 350,
        height: 60,
        backgroundColor: '#000000',
        marginTop: 35,
        marginLeft: 8,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',

    },
    botaoText: {
        fontSize: 15,
        fontWeight: 'bold',
        color: '#fff'
    },
    helloText: {
        fontSize: 40,
        fontWeight: 'bold',
        marginTop: 15,
        color: '#000000',
        marginEnd: 120,
        marginTop: 8
    },
    welcomeText: {
        fontSize: 16,
        marginTop: 10,
        marginEnd: 35,
        marginVertical: 10,
        color: '#808080',
    },
    forgotPassword: {
        textDecorationLine: 'underline',
        fontWeight: 'bold',
        marginTop: 15,
        marginBottom: 15,
        marginLeft: 30,
        fontSize: 12
    },
    Connected: {
        textDecorationLine: 'underline',
        fontWeight: 'bold',
        marginTop: 15,
        fontSize: 12,
        marginRight: 55,
        marginLeft: -5
    },
    checkBoxStyle: {
        marginTop: 15,
        flexDirection: 'row',
        marginStart: -10
    },
    eye: {
        alignSelf: 'flex-end',
        bottom: 42,
        right: 40
    }
})

export default Login;

Answer 1

在使用useState时，可以将visible设置为false，在WebViewModal中也设置visible={true}。

这可能会让人困惑。也许可以尝试更改useState定义中的变量名，比如

setVisible = useState(false)；to const可见，setIsVisible = useState(false)；

不确定这是否是一个解决方案，但值得一试。