2017-05-31 69 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> 
     ); 
    } 
} 

裏面的loginWithFacebook功能,當它到達的地方調用redirectToHome函數的行,就這樣說:

_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因爲this將無法​​正常工作裏面它不會是指正確的上下文

+0

它工作正常!但是,爲什麼當我使用'this.loginWithFacebook.bind(this)'時它會工作?我的意思是在此之後,我可以在loginWithFacebook函數中執行'this.props',而不必在構造函數 –

+0

中更新它,因爲您只將其中一個用作事件處理程序。我只是不會那樣做。 –