Oauth Facebook登录后出现“无法访问”错误

Question

我的按钮弹出，让我登录，但是当我将其重定向到下一页时，出现错误，指出无法从api访问，另一个错误提示未定义名称，我知道名称已定义，因为我已经以前用相同的代码工作过一次，但随后vscode做了一些愚蠢的事情并破坏了它。这是我的代码。

import React, {Component} from 'react';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';
import {PostData} from '../../services/PostData';
import {Redirect} from 'react-router-dom';
import './Welcome.css';

class Welcome extends Component {
  constructor (props) {
    super (props);
    this.state = {
      loginError: false,
      redirect: false,
    };
    this.signup = this.signup.bind (this);
  }

  signup (res, type) {
    let postData;
    if (type === 'facebook' && res.email) {
      postData = {
        name: res.name,
        provider: type,
        email: res.email,
        provider_id: res.id,
        token: res.accessToken,
        provider_pic: res.picture.data.url,
      };
    }

    if (type === 'google' && res.w3.U3) {
      postData = {
        name: res.w3.ig,
        provider: type,
        email: res.w3.U3,
        provider_id: res.El,
        token: res.Zi.access_token,
        provider_pic: res.w3.Paa,
      };
    }

    if (postData) {
      PostData ('signup', postData).then (result => {
        let responseJson = result;
        sessionStorage.setItem ('userData', JSON.stringify (responseJson));
        this.setState ({redirect: true});
      });
    } else {
    }
  }

  render () {
    if (this.state.redirect || sessionStorage.getItem ('userData')) {
      return <Redirect to={'/home'} />;
    }

    const responseFacebook = response => {
      console.log ('facebook console');
      console.log (response);
      this.signup (response, 'facebook');
    };

    const responseGoogle = response => {
      console.log ('google console');
      console.log (response);
      this.signup (response, 'google');
    };

    return (
      <div>
        <FacebookLogin
          appId="2580971392000123"
          autoLoad={false}
          fields="name,email,picture"
          callback={responseFacebook}
        />
        <br /><br />

        <GoogleLogin
          clientId="234567891765550-duk7c1do3705dlj8i6dnsr27oe7rlaq3.apps.googleusercontent.com"
          buttonText="Login with Google"
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
        />

      </div>
    );
  }
}

export default Welcome;

这是我得到的错误：

[HMR] Waiting for update signal from WDS...
react-dom.development.js:20718 Download the React DevTools for a better development experience: 
log.js:24 [HMR] Waiting for update signal from WDS...
Home.js:17 {error: {…}}error: {text: "No access"}__proto__: Object
Home.js:19 Uncaught TypeError: Cannot read property 'name' of undefined
    at Home.componentDidMount (Home.js:19)
    at commitLifeCycles (react-dom.development.js:16855)
    at commitAllLifeCycles (react-dom.development.js:18210)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18418)
    at completeRoot (react-dom.development.js:19875)
    at performWorkOnRoot (react-dom.development.js:19804)
    at performWork (react-dom.development.js:19712)

我一般都不熟悉React和编码，所以如果我听起来很愚蠢，请提前抱歉。 ：-）

Answer 1

此错误表示您没有有效的令牌/登录名。从错误Cannot read property 'name' of undefined的角度来看，我想说您正在尝试从不包含或不存在的对象中获取name属性（更有可能）。您可能已经定义了name，但是该定义超出了name调用的范围。

问题

您正在尝试将name中的postData设置为res.name，但从未定义res.name。

解决方案

查找创建res的位置，并创建或添加name属性。