Question

我使用create-react-app npm模块创建了一个示例反应应用程序。然后我将hello.js添加到应用程序中，以便能够使用此API编写快速应用程序。我已经在Facebook开发者网站上正确配置了我的应用程序ID（我已经使用另一个示例应用程序测试了这个，而不使用hello.js，它工作正常）。

当我点击“登录”按钮时，它会被重定向到FB登录页面，我输入正确的凭据并将其重定向到localhost，但没有成功响应。出于某种原因，这不起作用。我无法弄清楚出了什么问题。

以下是代码，如果有人对我做错了什么有想法：

import React, { Component } from 'react';
import * as hello from 'hellojs';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      askForLogin: true
    };

    hello.init({
      facebook: "XXXXXXXXXXXXXXXX" //correct api is provided here
    });

    hello.api("me").then(function(r){
      console.log("Successful login: ", r);
      this.setState({askForLogin: false});
    }, function(e) {
      console.log("Not successful yet");
      this.setState({askForLogin: true});
    });
  }

  login() {
    const options = { display: "page" };
    const cb = () => { console.log("Login callback");}
    hello.login("facebook", options, cb);
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {
          this.state.askForLogin ?
          <div>
            <button onClick={this.login}>Login to Facebook</button>
          </div> : <div></div>
        }
      </div>
    );
  }
}

export default App;

Answer 1

我能够通过明确地告诉hello.js使用'facebook'来解决它，并且它立即起作用。发布答案，以便如果其他人遇到问题，可能会对他们有所帮助：

import React, { Component } from 'react';
import * as hello from 'hellojs';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      askForLogin: true
    };

    hello.init({
      facebook: "XXXXXXXXXXXXXXX"
    });

    const facebook = hello.use("facebook"); //This is the new line

    facebook.api("me").then(function(r){
      console.log("Successful login: ", r);
      this.setState({askForLogin: false});
    }.bind(this), function(e) {
      console.log("Not successful yet");
      this.setState({askForLogin: true});
    }.bind(this));
  }

  login() {
    const options = { display: "page"};
    const cb = () => { console.log("Login callback");}
    hello.login("facebook", options, cb);
  }

  render() {

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {
          this.state.askForLogin ?
          <div>
            <button onClick={this.login}>Login to Facebook</button>
          </div> : <div></div>
        }
      </div>
    );
  }
}

export default App;

Facebook登录无法使用hello.js

1 个答案: