Question

我正在研究Reactjs项目，并正在使用Java版Facebook SDK来实现Facebook登录。我已经使它可以在一个组件（正常页面）上工作，但是当我尝试在登录模式下实现它时，它开始失败。

我可以调出Facebook弹出窗口并输入电子邮件和密码，但是当我提交时，facebookLogin函数中的以下代码无法访问“ this”，因此不会调用updateLoggedInState，并且我无法获取Facebook访问令牌。在我的其他组件中，我做了bind（this），它工作正常。但是，在我的登录模式下，当我进行绑定（this）时，Facebook插件按钮不会呈现。

不必显示所有代码，这很长，可能是什么问题？

%%%%%%% UPDATE %%%%%

我通过将updateLoggedInState作为回调发送到facebookLogin来解决了这个问题，它可以工作，但是仍然知道为什么不同组件中的行为会有所不同还是很好的。

%%%%%%%%%%%%%%%%%%%

登录模式组件

{...}
 componentDidMount() {
    this.facebookLogin();
  }

  facebookLogin() {
      window.fbAsyncInit = function () {
        FB.init({
          appId            : '{ID}',
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v3.1'
        });

        FB.Event.subscribe('auth.statusChange', (response) => {
          if (response.authResponse) {
            this.updateLoggedInState(response)
          } else {
            this.udpateLoggedInState()
          }
        });
      }
      // .bind(this) does not work; same with arrow function in fbAsyncInit; But works in other components.

      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        console.log('in SigninModal, facebookLogin, in lower function');
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  }

  updateLoggedInState(response) {
    console.log(response);
    // works in other components
  }
{...}

  render() {
    showHideClassName = this.props.show ? 'modal display-block' : 'modal display-none';
    return (
      <div className={showHideClassName}>
     {...}
      <div className="oath-button-box">
        <div className="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false">FB Login</div>
      </div>
  {...}
    );
  }

index.js正文

{...}
<body>
    <div class="container"></div>
    <div id="fb-root"></div>
      <script>
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1&appId=2249093511770692&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
  </body>
{...}

Facebook SDK FB初始化函数绑定对此不适用于某些组件

0 个答案: