Javascript Facebook数据，如何将其放入道具？

我正试图将Facebook的回复放在我的应用程序的道具中，这样我就可以在任何地方都能看到它们。到目前为止，我所做的是将我需要的数据保存在本地存储中，我想这不是正确的方法

实际上，用户ID已保存在道具中，但没有使用正确的流。在文章的末尾，你会看到我拥有的流程，以及我需要的流程

看看我的代码

// LIBRARY
import React from 'react';
import connectToStores from 'alt-utils/lib/connectToStores';

const { PropTypes } = React;

import AppActions from '../../actions/AppActions';
import AppStore from '../../stores/AppStore';

// @connectToStores
export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const _this = this;
    _this.checkSession();
  }

  componentDidUpdate() {
  render() {
    return (
      <div>
        <HtmlHeaderTags />
        <Header />
        <div className='main-content'>
          {this.props.children}
        </div>
        <Footer />
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.node
};

App.prototype.initFB = function(callback){

  window.fbAsyncInit = function() {
    FB.init({
      appId      : window.facebook_id,
      cookie     : true,  // enable cookies to allow the server to access the session
      xfbml      : true,  // parse social plugins on this page
      version    : 'v2.5' // use version 2.1
    });
    callback();
  }.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'));

}

App.prototype.checkFBSession = function() {

  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {

      // HERE I AM SETTING THE USERID IN THE LOCALSTORAGE
      localStorage.setItem('userID', response.authResponse.userID);

    } else if (response.status === 'not_authorized') {
      // the user is logged in to Facebook,
      // but has not authenticated your app
      console.error('Rejected (not_authorized)');
    } else {
      // the user isn't logged in to Facebook.
      console.error('Rejected (not logged in)');
      localStorage.removeItem('userID');
    }
  });
}

App.prototype.callServer = function(opts){

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open(opts.type, opts.url);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
      if(xmlhttp.status == 200){
        opts.success(xmlhttp.response);
      }else{
        opts.error(JSON.parse(xmlhttp.response));
      }
    }
  }
  xmlhttp.send(opts);
}

App.prototype.checkSession = function() {

  const _this = this;

  _this.callServer({
    url : '/api/me',
    type : 'GET',
    success(res){
      console.log(res);
    }, error(error){
      console.error(error);
    }
  });

  _this.initFB(function() {

    _this.checkFBSession(function(response){
      console.log(response);
    }, function(error){
      console.log(error);
    });
  });

}

App.prototype.displayName = 'App';

和我的店铺

import AppActions from '../actions/AppActions';

import alt from '../alt';
import { createStore, bind } from 'alt-utils/lib/decorators';


@createStore(alt)
class AppStore {

  static displayName = 'AppStore';

  constructor () {
    this.state = {
      facebookProp : localStorage.getItem('userID') || '',
    };
  }

  @bind(AppActions.checkFBSession)
  checkFBSession () {
    this.setState({
      facebookProp : localStorage.getItem('userID') || {}
    });
  }

这是我需要用户ID的组件

import React from 'react';
import connectToStores from 'alt-utils/lib/connectToStores';

import AppActions from '../../actions/AppActions';
import AppStore from '../../stores/AppStore';

@connectToStores
export default class Header extends React.Component {

  constructor(props) {
    super(props);
  }

  static getStores () {
    return [
      AppStore
    ];
  }

  static getPropsFromStores () {
    return {
      ...AppStore.getState()
    };
  }

  render () {

    let displayUserId;

    displayUserId = this.props.facebookProp ?
      {this.props.facebookProp} :
      <Button bsSize="xsmall" bsStyle="primary">{'Sign in'}</Button>;

    return (
      <Navbar staticTop>            
       {displayUserId}
      </Navbar>
    );
  }
};

Header.prototype.displayName = 'Header';

export default Header;

从“React”导入React；
从“alt-utils/lib/connectToStores”导入connectToStores；
从“../../actions/AppActions”导入AppActions；
从“../../stores/AppStore”导入AppStore；
@连接商店
导出默认类标头扩展React.Component{
建造师（道具）{
超级（道具）；
}
静态getStores（）{
返回[
应用商店
];
}
静态getPropsFromStores（）{
返回{
…AppStore.getState（）
};
}
渲染（）{
让显示用户ID；
displayUserId=this.props.facebookProp？
{this.props.facebookProp}：
{'Sign-in'}；
返回(
{displayUserId}
);
}
};
Header.prototype.displayName='Header'；
导出默认标题；

所以基本上我需要知道的是：

在哪里放置Facebook登录代码，以便将响应中的数据发送到商店

因为我现在正在做的是：加载应用程序，在componentDidMount上调用Facebook函数，将来自Facebook的响应存储在localStorage中，然后将数据传播到我需要的组件

我需要的流程与此类似，但我需要在商店和操作中从Facebook获取用户ID，而不是从父组件获取

那么你的建议是什么

---

我也乐于接受关于如何做的建议，因为这是我第一次使用Facebook登录，我只是一名初级开发人员。

当你可以定义类中的函数时，为什么要使用

原型？@taylorc93这实际上是我在教程中看到的方式。你的组件应该使用操作将所有内容存储在你的存储中。如果存储选择使用
localStorage
，这很好，但是组件应该对此一无所知。@MatthewHerbst这没关系，我明白了，但是，您能帮我处理一段代码吗？我不知道如何使我的代码适应这些要求。我不熟悉香草
Flux
或
localStorage
。我建议您查看一下
Redux
或
reflow
。它将使执行
Flux
-类似的事情变得简单。当您可以定义类中的函数时，为什么要使用
prototype
？@taylorc93这实际上是我在教程中看到的方式。您的组件应该使用操作将所有内容存储在您的存储中。如果存储选择使用
localStorage
，这很好，但是组件应该对此一无所知。@MatthewHerbst这没关系，我明白了，但是，您能帮我处理一段代码吗？我不知道如何使我的代码适应这些要求。我不熟悉香草
Flux
或
localStorage
。我建议您查看一下
Redux
或
reflow
。这将使做
Flux
-喜欢的事情变得更简单
import React from 'react';
import connectToStores from 'alt-utils/lib/connectToStores';

import AppActions from '../../actions/AppActions';
import AppStore from '../../stores/AppStore';

@connectToStores
export default class Header extends React.Component {

  constructor(props) {
    super(props);
  }

  static getStores () {
    return [
      AppStore
    ];
  }

  static getPropsFromStores () {
    return {
      ...AppStore.getState()
    };
  }

  render () {

    let displayUserId;

    displayUserId = this.props.facebookProp ?
      {this.props.facebookProp} :
      <Button bsSize="xsmall" bsStyle="primary">{'Sign in'}</Button>;

    return (
      <Navbar staticTop>            
       {displayUserId}
      </Navbar>
    );
  }
};

Header.prototype.displayName = 'Header';

export default Header;