web-dev-qa-db-ja.com

TypeError：nullのプロパティ 'uid'を読み取れません

Firebaseを使用したアプリで電話番号を使用してログインしようとしていますが、ログインプロセスで問題が発生しています。 Firebaseで電話番号を使用してログインできませんが、電話番号を登録してホームページにリダイレクトすると、正しく機能します。ログインに同じ方法を使用していますが、TypeError: Cannot read property 'uid' of nullのような問題が発生しましたが、すべてのコンソール値を取得できました。ここで何が問題なのかわかりません。しかし、そのエラーは3回繰り返し表示されています。

これが私のコードです：

    renderLoginButton() {
        if (this.props.loading) {
          return (
            <Spinner size="large" />
          );
        }

        return (
          <Button
          style={{ alignSelf: 'flex-start' }}
            onPress={this.onLoginBtnClicked.bind(this)}
          >
            Login
          </Button>
        );
      }

onLoginBtnClicked（）{

    const { contact, password } = this.props;
    const error =  Validator('password', password) ||  Validator('contact', contact);

    if (error !== null) {
      Alert.alert(error);
    } else {
          console.log('else');
        // this.props.loginUser({ contact, password});

        const mobileNo = '+91'+contact;
        firebase.auth().signInWithPhoneNumber(mobileNo)
        .then(confirmResult =>
            console.log(confirmResult),
            curr = firebase.auth(),
            console.log("curr"+JSON.stringify(curr)),
            this.setState({ data: curr}),
            NavigationService.navigate('Home')
        )
        .catch(error => console(error.message) );
    }

}

CustomDrawerComponent.js

    import React, { Component } from 'react';
import { View, Image, Text } from 'react-native';
import { DrawerItems } from 'react-navigation';
import { connect } from 'react-redux';

import { fetchUserDetails } from '../actions';

class CustomDrawerContentComponent extends Component {

  state = {
    uri: '',
    isfailed: ''
  }

  componentWillMount() {
    this.props.fetchUserDetails();
  }

  componentWillReceiveProps(nextProps) {
    let uri = '';
    if (nextProps.ProfilePic !== '') {
      uri = nextProps.ProfilePic;
      this.setState({ uri, isfailed: false });
    } else {
      uri = '../images/ic_person_24px.png';
      this.setState({ uri, isfailed: true });
    }

    this.setState({ uri });
  }

  renderProfileImage() {
    if (!this.state.isfailed) {
      return (
        <Image
          style={styles.profileImageStyle}
          source={{ uri: (this.state.uri) }}
        />
      );
    }
    return (
      <Image
        style={styles.profileImageStyle}
        source={require('../images/ic_person_24px.png')}
      />
    );
  }

  render() {
    console.log('Profile Pic :: ', this.props.ProfilePic);
    return (
      <View style={styles.container}>
        {this.renderProfileImage()}
        <Text style={styles.textStyle}>
          {this.props.name} - {this.props.category}
        </Text>
        <DrawerItems {...this.props} />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    paddingLeft: 10
  },
  textStyle: {
    fontSize: 14,
    textAlign: 'left',
    color: '#000000'
  },
  profileImageStyle: {
    alignSelf: 'flex-start',
    marginTop: 16,
    padding: 10,
    width: 40,
    height: 40,
    borderRadius: 75
  }
};

const mapStateToProps = state => {
  const { userprofile } = state;
  return userprofile;
};

export default connect(mapStateToProps, { fetchUserDetails })(CustomDrawerContentComponent);

callStack：

enter image description hereenter image description here

firebasereact-nativefirebase-realtime-databasefirebase-authentication
7
Mahi Parmar

userがundefined（またはnull）として返されるのはなぜですか？

ログインしたユーザーがあることを知っています。ログインしたばかりです、そうです、chrome dev toolsでユーザーオブジェクトを表示することもできます。

では、なぜまだ未定義を返すのですか？それには正解があります。

ユーザーオブジェクトを取得しています[〜＃〜] before [〜＃〜]そのオブジェクトを使用する準備ができています。

現在、これはいくつかの異なる理由で発生する可能性がありますが、この2つの「ルール」に従えば、そのエラーは再び表示されません。

ルール＃1：constructor()の外に移動します

次のようなものがあれば：

constructor(){
  this.userId = firebase.auth().currentUser.uid
}

ページが読み込まれる時間の半分を超えると、ユーザーの準備が整う前にコンストラクターがユーザーを取得しようとします。ページが完全に読み込まれていないためアプリがページをブロックしているため、uidにアクセスしようとしていますまだ存在しないプロパティの。

ページが完全に読み込まれたら、を呼び出してcurrentUser.uid

ルール＃2：観察可能にする

実行できる別の方法があります。先ほど行った前のFirebase呼び出しです。firebase.auth（）。currentUserは同期です。代わりにauthオブザーバブルをサブスクライブすることで非同期にすることができます。

/**
   * When the App component mounts, we listen for any authentication
   * state changes in Firebase.
   * Once subscribed, the 'user' parameter will either be null 
   * (logged out) or an Object (logged in)
   */
  componentDidMount() {
    this.authSubscription = firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        loading: false,
        user,
      });
    });
  }
  /**
   * Don't forget to stop listening for authentication state changes
   * when the component unmounts.
   */
  componentWillUnmount() {
    this.authSubscription();
  }
  render() {
    // The application is initialising
    if (this.state.loading) return null;
    // The user is an Object, so they're logged in
    if (this.state.user) return <LoggedIn />;
    // The user is null, so they're logged out
    return <LoggedOut />;
  }
}

ソース記事： Firebaseがundefinedをフェッチするとuidを返す理由

Reactネイティブの優れたチュートリアルがここにあります： Firebase AuthenticationのはじめにReactネイティブ 以​​降、コードは表示されませんでしたより多くのコードを表示するように質問を更新していただければ幸いです。

6
Angus Tay