Question

我试图将Facebook的响应放在我的应用程序的道具中，这样我就可以在任何地方使用它们。到目前为止，我正在做的是在localStorage中保存我需要的数据，我猜这不是正确的方法。

实际上，userID已保存在props中，但没有正确的流程。在帖子的最后，您将看到我拥有的流程以及我需要的流程。

查看我的代码

// 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';

一切都在那里开始。在App.prototype.checkFBSession我在localStorage中设置userID。然后我有我的行动和我的商店，看看：

行动

import { createActions } from 'alt-utils/lib/decorators';
import alt from '../alt';

@createActions(alt)
class AppActions {
  constructor() {
    this.generateActions(
      'checkFBSession'
    );
  }
}
export default alt.createActions(AppActions);

和我的商店

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') || {}
    });
  }

这是我需要userID的组件

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;

基本上我需要知道的是：

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

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

我需要的流程类似于此，但我需要来自Facebook的商店和操作中的userID，而不是来自父组件。

那你有什么建议？

我也愿意接受如何做的建议，因为这是我第一次使用Facebook登录，我只是一个初级开发者。

Facebook数据，如何把它放在道具？

0 个答案: