开发者问题收集

在 react-native 中,undefined 不是一个对象(正在评估'_route$params.userName')

2021-03-09
42

当我尝试在 React Native 中将数据从登录屏幕传递到我的个人资料屏幕时,我遇到了这个问题。

我很困惑我在这段代码中遗漏了什么,所以有人可以帮助我解决这个问题。

提前谢谢你。

在此处输入图像描述

登录屏幕

const Login = ({ navigation }) => {
    const [name, setName] = useState("");
    const [password, setPassword] = useState("");


    function resetTextInput() {

        navigation.navigate('MyProfileScreen', { userName: name, userPwd: password });
        console.log("reset TextInput");
        setName("");
        setPassword("");
    }
    return (
        <View style={styles.mainContainer}>
            <Text style={styles.txtTitle}>Login</Text>
            <View style={{ marginTop: 80 }}>
                <TextInput
                    placeholder={'Username'}
                    style={styles.txtInput}
                    onChangeText={(name) => { setName(name) }}
                    value={name}
                />
                <TextInput
                    placeholder={'Password'}
                    style={styles.txtInput}
                    secureTextEntry={true}
                    onChangeText={(password) => { setPassword(password) }}
                    value={password}
                />
            </View>
            <TouchableOpacity style={styles.loginBtn} onPress={() => { resetTextInput() }}>
                <Text style={styles.loginBtnTxt}>Login</Text>
            </TouchableOpacity>
        </View>
    )
}

我的个人资料屏幕

const MyProfile = ({ route}) => {
 
     const { userName, userPwd } = route.params;

    return (
        <View style={styles.mainContainer}>

            <Image source={require('./../../../asstes/images/profileimg.png')} style={styles.imgProfile} />

            <Text style={styles.userData}>Username:- {JSON.stringify(userName)}</Text>
            <Text style={styles.userData}>Password:-{JSON.stringify(userPwd)} </Text>

        </View>
    )
}
1个回答

您没有导航,但您可能尝试点击屏幕。

解决此问题的最简单方法是处理空值。

const MyProfile = ({ route}) => {
 
    return (
        <View style={styles.mainContainer}>

            <Image source={require('./../../../asstes/images/profileimg.png')} style={styles.imgProfile} />

            <Text style={styles.userData}>Username:- {JSON.stringify(route?.params?.userName)}</Text>
            <Text style={styles.userData}>Password:-{JSON.stringify(route?.params?.userPwd)} </Text>

        </View>
    )
}

这将确保您不会因空值而崩溃。

建议: 考虑使用类似 React 上下文的东西来管理登录,并查看身份验证流程 https://reactnavigation.org/docs/auth-flow

Guruparan Giritharan
2021-03-09