Question

我在我的项目中完成了一个Facebook登录功能，但登录成功后我无法setState。我收到此错误this.setState is not a function。我试图在成功setState之后创建一个单独的函数调用，结果是一样的，告诉我我的函数不是函数。我该怎么办？

constructor(props) {
    super(props);

    this.state = {
        fblogindone:false,
     };
}


_fbAuth(){
    // Attempt a login using the Facebook login dialog asking for default permissions and email.
    LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login cancelled');
        } else {
          // Create response callback.
          const responseInfoCallback = function(error, result) {
            if (error) {
              console.log(error);
              alert('Error fetching data: ' + error.toString());
            } else {
              console.log(JSON.stringify(result));
              this.setState({
                fblogindone:true
              });
            }
          }
          // Create a graph request asking for user email and names with a callback to handle the response.
          const infoRequest = new GraphRequest('/me',{
              parameters: {
                fields: {
                  string: 'id,name,email'
                }
              }
            },
            responseInfoCallback
          );
          // Start the graph request.
          new GraphRequestManager().addRequest(infoRequest).start()
        }
      },
      function(error) {
        alert('Login fail with error: ' + error);
      }
    );
}

render() {
  return(
      <View style={styles.topcontainer}>
        <TouchableOpacity activeOpacity={0.9} onPress={()=> this._fbAuth()}>
            <FoIcon name="user-circle-o" size={33} color="#fff"/>
        </TouchableOpacity>
      </View>
  );
}

Answer 1

我修复了自己的错误，所以我发布了我的解决方案，希望将来可以帮助其他人。首先，我将函数名称更改为_fbAuth = () =>{然后在子函数内部返回所有更改为箭头函数(result) => {和responseInfoCallback = (error, result) =>{，然后this可以在我的facebook登录回调中使用。

    _fbAuth = () =>{
        // Attempt a login using the Facebook login dialog asking for default permissions and email.
        LoginManager.logInWithReadPermissions(['public_profile', 'email']).then(
          (result) => {
            if (result.isCancelled) {
              alert('Login cancelled');
            } else {
              // Create response callback.
              const responseInfoCallback = (error, result) =>{
                if (error) {
                  console.log(error);
                  alert('Error fetching data: ' + error.toString());
                } else {
                  this.setState({
                    fblogindone:true
                  });
                }
              }
              // Create a graph request asking for user email and names with a callback to handle the response.
              const infoRequest = new GraphRequest('/me',{
                  parameters: {
                    fields: {
                      string: 'id,name,email'
                    }
                  }
                },
                responseInfoCallback
              );
              // Start the graph request.
              new GraphRequestManager().addRequest(infoRequest).start()
            }
          },
          function(error) {
            alert('Login fail with error: ' + error);
          }
        );
    }

Answer 2

您必须通过箭头函数或直接绑定将您的（此）上下文绑定到函数。所以你会改变你的函数声明。

_fbAuth(){

到

_fbAuth = () => {

或您要在构造函数中添加。

constructor(props) {
    super(props);

    this.state = {
        fblogindone:false,
     };
    this._fbAuth = this._fbAuth.bind(this)
}

React Native - Facebook登录不能setState

2 个答案: