个人中心
gpt4 book ai didi

javascript - 为什么我无法访问我的 .then() promise 中的 this.state 变量？

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:11:07 26 4
gpt4 key购买 nike

<分区>

我正在尝试为具有 firebase 身份验证/数据库的 react-native 移动应用程序创建登录和注册过程。

我可以使用 Login.js 中预先存在的电子邮件/密码成功登录。

当我尝试在 SignUp.js 中创建新帐户时出现问题

用户已正确添加到 firebase 身份验证，但我希望我的用户配置文件包含更多信息。这就是为什么我将他们的姓名、电子邮件和其他信息写入数据库的原因，这些信息是我从 Signup.js 第 33 行的代码中删除的，并使用第 52 行的辅助函数。

我的错误是 undefined is not an object(evaluating this.state.email)，来自 SignUp.js 的第 33 行

这对我来说没有意义，因为我可以使用 this.state.email

在 SignUp.js 的第 27 行成功创建用户

this.state.email 是否超出范围？任何帮助是极大的赞赏。

App.js

import React from 'react';
import { StackNavigator } from 'react-navigation';
import * as firebase from 'firebase'; 
import Dashboard from './components/Dashboard';
import Login from './components/Login';
import SignUp from './components/SignUp';

const Application = StackNavigator({
    Login: { screen: Login},
    SignUp: { screen: SignUp},
    Dashboard: { screen: Dashboard },
});

export default class App extends React.Component {
    componentWillMount(){
        const firebaseConfig = {
            apiKey: 'MY KEY',
            authDomain: 'MY DOMAIN',
            databaseURL: 'MY DATABASE URL',
        }
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
    }
    render() {
        return (
            <Application/>
        )}}

登录.js

import React from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, ImageBackground } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button } from 'react-native-elements';
import { Input } from './Input';
import Dashboard from './Dashboard';
import * as firebase from 'firebase';

export default class Login extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            email: '',
            password: '',
        }
    }

    loginUser = (email, password, navigate) => {
        try{
            firebase.auth().signInWithEmailAndPassword(email, password)
            .then(function(user){
                console.log(user);
                navigate('Dashboard', {email, password});
            })
        }
        catch (error){
            alert('No known user for that email and password combination')
            console.log(error.toString());
        }
    }

    static navigationOptions = { header: null }

    render() {
        const{ navigate } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior='padding'>
                <Input
                    placeholder = 'Email'
                    onChangeText = {email => this.setState({email})}
                    value = {this.state.email}/>
                <Input
                    placeholder = 'Password'
                    secureTextEntry
                    onChangeText = {password => this.setState({password})}
                    value = {this.state.password}/>
                <Button
                    title = 'Log in'
                    onPress = {() => this.loginUser(this.state.email, this.state.password, navigate)}/>
                <Button
                    title = 'Sign up'
                    onPress = {() => navigate('SignUp')}/>
            </KeyboardAvoidingView>
        );
    }
}

注册.js

import React from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, ImageBackground } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button } from 'react-native-elements';
import { Input } from './Input';
import Dashboard from './Dashboard';

import * as firebase from 'firebase';

export default class SignUp extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            password: '',
            confirmPassword: '',
        }
    }

    signUpUser = () => {
        try{
            if(this.state.password === this.state.confirmPassword){
                console.log('CREATING USER...');
                firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then( response => {
                    console.log('SIGNING IN...');
                    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
                    firebase.auth().onAuthStateChanged(function(user) {
                        if (user) {
                            console.log('WRITING TO DATABASE...');
                            this.writeUserData(user, this.state.email, this.state.firstName, this.state.lastName);
                        }
                        else {
                            alert('Something went wrong. Please try again.');
                            return;
                        }
                    });
                })
            }
            else{
                alert('Passwords do not match');
                return;
            }
        }
        catch(error){
            console.log(error.toString());
        }
    }

    writeUserData = (user, email, first, last) => {
        console.log('ADDING USER ' + user.uid)
        try{
            firebase.database().ref('users/' + user.uid).set({
                email: email,
                first: first,
                last: last,
            });
        }
        catch(error){
            console.log(error.toString());
        }
        console.log('WRITE COMPLETE')
        //navigate to dashboard
    }

    static navigationOptions = { header: null }

    render() {
        const{ navigate } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior='padding'>
                <Input
                   placeholder = 'First Name'
                   onChangeText = {firstName => this.setState({firstName})}
                   value = {this.state.firstName}/>
                <Input
                    placeholder = 'Last Name'
                    onChangeText = {lastName => this.setState({lastName})}
                    value = {this.state.lastName}/>
                <Input
                    placeholder = 'Email'
                    onChangeText = {email => this.setState({email})}
                    value = {this.state.email}/>
                <Input
                    placeholder = 'Password'
                    secureTextEntry
                    onChangeText = {password => this.setState({password})}
                    value = {this.state.password}/>
                <Input
                    placeholder = 'Confirm password'
                    secureTextEntry
                    onChangeText = {confirmPassword => this.setState({confirmPassword})}
                    value = {this.state.confirmPassword}/>

                <Button
                    title = 'Create Account'
                    onPress = {() => this.signUpUser()}/>
                <Text
                    activeOpacity={0.75}
                    onPress = {() => this.props.navigation.goBack()}>
                    Go back
                </Text>
            </KeyboardAvoidingView>
        );
    }
}

26 4 0
文章推荐： javascript - 验证 v0.17.6 : How to get the autocomplete text inside v-select
文章推荐： android - 如何打开模拟器屏幕？
文章推荐： 安卓.content.res.Resources$NotFoundException : Resource ID #0x7f07007e
文章推荐： javascript - react 设置状态回调传递参数的正确方法
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com