React.js:为什么组件状态不会改变,为什么组件状态改变后组件不会重新渲染?

时间:2017-08-01 17:58:47

标签: node.js reactjs amazon-web-services facebook-graph-api facebook-javascript-sdk

我遇到以下代码的问题。当我设置术语变量的State时,组件重新渲染,并且值显示在页面上。但是,当facebook用户登录并运行responseFacebook函数时,setState不起作用,并且不会重新呈现该组件。我无法让状态包含访问令牌。我看到Facebook和AWS的回复,但我无法存储toekens。也许我这样做是错的。我很反应(2天),facebook SDK,AWS SDK和一般授权。请问,有什么建议吗?

import React, { Component } from 'react';
import './Home.css';
import FacebookLogin from 'react-facebook-login';
import graph from 'fb-react-sdk';
import config from '../config.js';

import {
  CognitoUserPool,
  AuthenticationDetails,
  CognitoUser
} from 'amazon-cognito-identity-js';

var AWS = require('aws-sdk');
var request = require('request');

graph.setAppSecret(APPSECRET);

class Home extends Component {

  constructor(props){
        super(props);
        this.responseFacebook = this.responseFacebook.bind(this);

        this.state = { 
            term: '',
            accessTokenFB: '',
            accessTokenAWS: ''
        };

        console.log('We are here 1: ' + this.state.accessTokenFB);
        if(this.state.accessTokenFB != null){
          console.log('We are here 2');
          this.getFriends();
        }

    }

    componentDidUpdate(){
         console.log("This component updated!!!!");
    }

    getFriends(){
      var options = {
        timeout:  3000,
        pool:     { maxSockets:  Infinity },
        headers:  { connection:  "keep-alive" }
      };

      graph
        .setOptions(options)
        .get("me/friends", function(err, res) {
          console.log(res);
      });
    }


    responseFacebook(response) {
      console.log(response);
      console.log(response.accessToken);
      graph.setAccessToken(response.accessToken);

      this.getFriends();

      console.log('TokenFB: ' + this. accessTokenFB);
      console.log('TokenFB: ' + response.accessToken);



      // Check if the user logged in successfully.
      if (response.accessToken) {

        console.log('You have an FB token.');

        AWS.config.region = 'us-east-1';

        // Add the Facebook access token to the Cognito credentials login map.
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
          IdentityPoolId: config.cognito.IDENTITY_POOL_ID,
          Logins: {
            'graph.facebook.com': response.accessToken
          }
        });

        // Obtain AWS credentials
        AWS.config.credentials.get(function(data){
            // Access AWS resources here.
            console.log("Logged into aws...");
            console.log("TokenAWS: " + AWS.config.credentials.sessionToken);
        });

        this.setState({ 
          accessTokenFB: response.accessToken,
          accessTokenAWS: AWS.config.credentials.sessionToken
        });

        //console.log(AWS.config.credentials.sessionToken);

      } else {
        console.log('There was a problem logging you in.');
      }
    }

  render() {
    console.log('TokenFB: ' + this. accessTokenFB);
    return (
      <div className="Home">
        <div className="lander">

          <FacebookLogin
            appId="**********"
            autoLoad={true}
            fields="name,email,picture"
            callback={this.responseFacebook}
          />
          <a href="#" onClick={event => this.setState({term:"5"})} >click</a><br/>
          Term: {this.state.term}<br/>
          TokenAWS: {this.state.accessTokenAWS}
        </div>
      </div>
    );
  }
}

export default Home;

0 个答案:

没有答案