reactjs和Facebook API：获取错误'FB'没有定义no-undef

Question

我在ReactJS中是全新的，只是想玩弄一些东西并测试一些东西。我正在研究如何实现Facebook API，但得到此错误消息：

error 'FB' is not defined no-undef 

不知道如何去解决这个问题。想寻求帮助，看看我在这里做错了什么。我是否应该导入某种Facebook API？

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

 
class App extends Component { 
 

 
    componentDidMount() { 
 
    window.fbAsyncInit = function() { 
 
     FB.init({ 
 
     appId  : '123141151155', //random app number 
 
     cookie  : true, // enable cookies to allow the server to access 
 
          // the session 
 
     xfbml  : true, // parse social plugins on this page 
 
     version : 'v2.3' 
 
     }); 
 
     //JS SDK initialized, now you can use it 
 
     FB.XFBML.parse(); 
 

 
     // Now that we've initialized the JavaScript SDK, we call 
 
     // FB.getLoginStatus(). This function gets the state of the 
 
     // person visiting this page and can return one of three states to 
 
     // the callback you provide. They can be: 
 
     // 
 
     // 1. Logged into your app ('connected') 
 
     // 2. Logged into Facebook, but not your app ('not_authorized') 
 
     // 3. Not logged into Facebook and can't tell if they are logged into 
 
     // your app or not. 
 
     // 
 
     // These three cases are handled in the callback function. 
 
     FB.getLoginStatus(function(response) { 
 
     this.statusChangeCallback(response); 
 
     }.bind(this)); 
 
    }.bind(this); 
 

 
    // Load the SDK asynchronously 
 
    (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 = "//connect.facebook.net/en_US/sdk.js"; 
 
     fjs.parentNode.insertBefore(js, fjs); 
 
    }(document, 'script', 'facebook-jssdk')); 
 
    } 
 

 
    // Here we run a very simple test of the Graph API after login is 
 
    // successful. See statusChangeCallback() for when this call is made. 
 
    testAPI() { 
 
    console.log('Welcome! Fetching your information.... '); 
 
    FB.api('/me', function(response) { 
 
    console.log('Successful login for: ' + response.name); 
 
    document.getElementById('status').innerHTML = 
 
     'Thanks for logging in, ' + response.name + '!'; 
 
    }); 
 
    } 
 

 
    // This is called with the results from from FB.getLoginStatus(). 
 
    statusChangeCallback(response) { 
 
    console.log('statusChangeCallback'); 
 
    console.log(response); 
 
    // The response object is returned with a status field that lets the 
 
    // app know the current login status of the person. 
 
    // Full docs on the response object can be found in the documentation 
 
    // for FB.getLoginStatus(). 
 
    if (response.status === 'connected') { 
 
     // Logged into your app and Facebook. 
 
     this.testAPI(); 
 
    } else if (response.status === 'not_authorized') { 
 
     // The person is logged into Facebook, but not your app. 
 
     document.getElementById('status').innerHTML = 'Please log ' + 
 
     'into this app.'; 
 
    } else { 
 
     // The person is not logged into Facebook, so we're not sure if 
 
     // they are logged into this app or not. 
 
     document.getElementById('status').innerHTML = 'Please log ' + 
 
     'into Facebook.'; 
 
    } 
 
    } 
 

 
    // This function is called when someone finishes with the Login 
 
    // Button. See the onlogin handler attached to it in the sample 
 
    // code below. 
 
    checkLoginState() { 
 
    FB.getLoginStatus(function(response) { 
 
     this.statusChangeCallback(response); 
 
    }.bind(this)); 
 
    } 
 

 
    handleClick() { 
 
    FB.login(this.checkLoginState()); 
 
    } 
 

 
    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> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

Answer 1

Accourding的文档，你缺少导入/需要的lib。我想你只需要导入的文件在开始时一样：

import FB from 'fb'; 

我希望它可以帮助

Answer 2

我遇到了同样的问题，并提出了另一种解决方案。

'FB' is not defined no-undef可以从window引用它，即使用window.FB，而不是仅仅FB来解决。这个解决方法不需要安装任何额外的npm包。

下面是将该组件集成到React项目中的工作repo，在src/App.js中，您将找到上面相同的代码片段，即堆栈溢出问题：Implement Facebook API login with reactjs 。

提供这种替代解决方案作为附加选项，我希望它有帮助。