无法读取undefined的属性'navigate' - React Native

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法读取undefined的属性'navigate' - React Native相关的知识,希望对你有一定的参考价值。

我是React-Native的新手。我只是不断得到“无法读取未定义的属性'导航'的错误”。这是示例代码

export default class Form extends Component {
    constructor(props) {
        super(props);
        this.loginHandler = this.loginHandler.bind(this);
        this.navigate  = this.props.navigation;
        this.successCallback = this.successCallback.bind(this);
        this.state = {
            email: '',
            password: '',
        }
    }

    // TODO - Login Authentication
    loginHandler() {
        var loginUrl = 'someURL';
        fetch(loginUrl, {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: this.state.email,
                password: this.state.password
            }),
        })
            .then(response => { return response.json(); })
            .then(responseData => { return responseData; })
            .then((responseData) => {
                this.successCallback(responseData.token)
            })
            .catch((err) => { console.log(err); });

    }

    successCallback(token) {
        if (token === undefined)
            alert("Email or password is incorrect !");
        else {
            this.props.navigation.navigate('User', {tokenFromUser: token});
        }

}

在successCallback函数中,如果生成令牌,则表示登录凭据是正确的,因此它应该导航到带有参数'令牌'的UserScreen。谁能帮我 ?

这是我如何调用loginHandler函数

        <TouchableOpacity style={styles.button} onPress={this.loginHandler} >
            <Image source={loginImage} style={styles.image} />
            <View style={styles.SeparatorLine} />
            <Text style={styles.text}>
                Enter
            </Text>
        </TouchableOpacity>
答案

我猜我找到了解决方案。在我调用Form.js组件的地方,我只是添加了{... this.props}作为道具。

<Form {...this.props}   />

像这样因为Form.js的道具是空的。

以上是关于无法读取undefined的属性'navigate' - React Native的主要内容,如果未能解决你的问题,请参考以下文章

无法读取undefined的属性'navigate' - React Native

TypeError:无法读取undefined的属性'gmail'

Ionic3测试:TypeError:无法读取undefined的属性'subscribe'

无法读取undefined属性'dirty'

未捕获的TypeError:无法读取undefined的属性'release'

为什么我得到'TypeError:无法读取属性'slice'的undefined'?