2017-05-31 6 views
-1

メンバ関数未定義 - 私はこのクラスを作っているのjavascript

import React, {Component} from 'react'; 

import { 
    View, 
    ActivityIndicator, 
    Button 
} from 'react-native'; 

import Auth from '../api/Auth'; 

export default class LoginScreen extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      alreadyLoggedIn: true 
     }; 
     this.redirectToHome.bind(this); 
     this.loginWithFacebook.bind(this); 
    } 

    componentWillMount() { 
     Auth.isAlreadyLoggedIn().then((res) => { 
      if(res == true) { 
       this.redirectToHome(); 
      } else { 
       this.setState({alreadyLoggedIn: false}); 
      } 
     }); 
    } 

    redirectToHome() { 
     this.props.navigator.resetTo({ 
      screen: 'homeScreen', 
      title: 'Meetups' 
     }); 
    } 

    loginWithFacebook() { 
     Auth.loginWithFacebook().then((success) => { 
      if(success == true) { 
       this.redirectToHome(); 
      } 
     }).catch((err) => { 
      console.error(err); 
     }); 

    } 

    render() { 
     return(
      <View> 
       {this.state.alreadyLoggedIn == false && 
        <Button title="Login with Facebook" onPress={this.loginWithFacebook} /> 
       } 
       {this.state.alreadyLoggedIn == true && 
        <ActivityIndicator animating={this.state.alreadyLoggedIn} /> 
       } 
      </View> 
     ); 
    } 
} 

それはredirectToHome関数を呼び出す行に到達loginWithFacebook機能、内部では、それはこのことを言う:

_this3.redirectToHome is not a function 

enter image description here

私は間違った方法でこの機能にアクセスしていますか?関数を静的にすることはできず、thisオブジェクトが必要でした。

どうすればよいですか?

答えて

0

あなたが実際にコンストラクタ内で「メンバ関数」を更新する必要があります。

this.redirectToHome = this.redirectToHome.bind(this); 
this.loginWithFacebook = this.loginWithFacebook.bind(this); 
+0

それは働きました!しかし、 'this.loginWithFacebook.bind(this)'だけを使うと、なぜうまくいくのですか?私はこの後、このことをやり遂げることができます。loginWithFacebook関数内のthis.propsをコンストラクタで更新せずに実行することができます –

1

問題は、あなたは、コンストラクタで正しく機能するために結合を行っているということです。

constructor(props) { 
    super(props); 
    this.state = { 
     alreadyLoggedIn: true 
    }; 
    this.redirectToHome = this.redirectToHome.bind(this); 
    this.loginWithFacebook = this.loginWithFacebook.bind(this); 
} 

this.loginWithFacebook.bind(this);適切な結合後に新しい機能を返すと、あなたはその後、返された機能を使用する必要があります。あなたがこの新しく追加された関数を割り当てなかったので、this.loginWithFacebookとバインドされていないあなた自身の定義された関数にrefererringするのでthis.redirectToHomeは正しく動作しません

+0

これは機能しました!しかし、 'this.loginWithFacebook.bind(this)'だけを使うと、なぜうまくいくのですか?この後、loginWithFacebook関数内で 'this.props'をコンストラクタ –

+0

で更新することなく実行できます。なぜなら、2つのうちの1つだけをイベントハンドラとして使用しているからです。私はそれをしないだろう。 –

関連する問題