使用ReactJS登录ReactJS Facebook -facebook登录包

Question

我试图在ReactJS中使用react facebook-登录包实现Facebook登录按钮。它非常简单，与提供的一段代码。

但是，在用户登录并且仍然有一个有效的令牌之后，按钮不会改变，并继续显示“登录脸书”。我可以在console.log中看到响应，包括名称、图片、id、accessToken、userIDE 210

ButtonFacebookLogin.js:18

Object {name: "John Doe", picture: Object, id: "101560159xxxxxxx", 
accessToken: "EAAFdByROZC…5tDST3sxnhZASZBZ", userID: "101560159xxxxxxxx"…}

它应该自行更改，还是应该更改ReactJS脚本中的代码，以检查是否可以进行有效的登录？

import React from 'react';
import FacebookLogin from 'react-facebook-login';

class ButtonFacebookLogin extends React.Component {
  constructor(props) {
    super(props);

    this.responseFacebook = this.responseFacebook.bind(this);
    this.user = null;
  };

  responseFacebook(response) {
    console.log(response);
    this.user = response.name;
    console.log(this.user);
  };

  componentClicked(response) {
    console.log(response);
  };

  render() {
    return (
      <FacebookLogin
        appId="383760232021913"
        autoLoad={true}
        fields="name,email,picture"
        scope="public_profile,user_friends"
        onClick={this.componentClicked}
        callback={this.responseFacebook}
      />
      // just here above the button always looks the same
    )
  }

对不起，这个问题听起来可能很傻，因为我是ReactJS的新手:-)而且我在这个Facebook包上找不到很多文档。

Answer 1

也许试试这个，从特拉维斯媒体那里得到密码，建议你查查他

export default class Facebook extends Component {
    state = {
      isLoggedIn: false,
      userID: "",
      name: "",
      email: "",
      picture: ""
    };
  
    
    responseFacebook = response => {
       console.log(response);
  
      this.setState({
        isLoggedIn: true,
        userID: response.userID,
        name: response.name,
        email: response.clientSecret,
        picture: response.picture.data.url
      });
    };
  
    componentClicked = () => console.log("clicked");

    render() {
      let fbContent;

      if (this.state.isLoggedIn) {
        fbContent = (
          <div
            style={{
              width: "400px",
              margin: "auto",
              background: "#grey",
              padding: "20px"
            }}
          >
            <img src={this.state.picture} alt={this.state.name} />
            <h2>Welcome {this.state.name}</h2>
            Email: {this.state.email}
          </div>
        );
      } else {
        fbContent = (
          <FacebookLogin
            appId="304489330816284"
            autoLoad={false}
            fields="name,email,picture"
            onClick={this.componentClicked}
            callback={this.responseFacebook}
           // scope="public_profile,user_friends,user_actions.Test"
          //  callback={this.responseFacebook}
          />
        );
      }
  
      return <div>{fbContent}</div>;
    }
  }
}

Answer 2

是的，您必须检查它是否已经登录，并更改FacebookLogin组件的FacebookLogin字段。