javascript - (React-Native) FBSDK 可能出现未处理的 Promise 拒绝

Question

所以我有这个代码:

export default class Login extends Component {

  constructor(props){
    super(props);
    this._fbAuth = this._fbAuth.bind(this);
    this.login = this.login.bind(this);
  }

  login(){
      this.props.navigator.push({
        id: "Home",
      });
  }

  _fbAuth(){
    LoginManager.logInWithReadPermissions(['public_profile']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login cancelled');
        } else {
alert('Login success with permissions: '+result.grantedPermissions.toString());
          this.login();
        }
      },
      function(error) {
        alert('Login fail with error: ' + error);
      }
    );
  }

  render() {
    return (
      <View style={styles.container}>
              <View style={styles.botbuttoncontainer}>
                <Text style={styles.otherlogintext}>Or log in using</Text>
                <View style={styles.otherloginbutton}>
                <TouchableOpacity style={styles.facebookbutton} activeOpacity={0.5} onPress={()=>this._fbAuth()}>
                  <Icons name="logo-facebook" size={20} color="white"/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.twitterbutton} activeOpacity={0.5}>
                  <Icons name="logo-twitter" size={20} color="white"/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.googlebutton} activeOpacity={0.5}>
                  <Icons name="logo-googleplus" size={20} color="white"/>
                </TouchableOpacity>
                </View>
              </View>
      </View>
    );
  }
}

每次我尝试使用 Facebook 登录时都会成功。但我总是收到警告说

"Possible Unhandled Promise Rejection(id:0): TypeError: undefined is not a function (evaluating 'this.login()')"

我尝试绑定(bind)函数 _fbAuth 并在构造函数上登录，但它仍然给出相同的警告。

Answer 1

您需要绑定(bind)then调用的内部函数。

示例

LoginManager.logInWithReadPermissions(['public_profile']).then(
  function (result) {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  }.bind(this),
  function (error) {
    alert('Login fail with error: ' + error);
  }
);

或者您可以使用箭头函数

LoginManager.logInWithReadPermissions(['public_profile']).then(
  (result) => {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  },
  function (error) {
    alert('Login fail with error: ' + error);
  }
);

另一个好的做法是在使用 Promise 时使用 catch

示例

LoginManager.logInWithReadPermissions(['public_profile']).then(
  (result) => {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  },
  function (error) {
    alert('Login fail with error: ' + error);
  }
).catch((error) => console.error(error)); // error handling for promise