Question

我是个超级新手，我一直在努力找出是什么原因导致chrome console

中的此错误

bundle.js:15316 Uncaught (in promise) TypeError: _this2.setState is not a function

我正在尝试使用Facebook进行简单登录到Web应用程序，以了解登录流程。

我已经在/（也是我的home页面路由）上设置了登录名。我认为问题不在于路由或其他任何问题。 binding中的react似乎是一个问题，并且是该框架的新功能-我很难解决这个问题。

我的/或home路线jsx如下

import React, { Component } from "react";
import { browserHistory } from 'react-router';
import FacebookLogin from 'react-facebook-login';


export default class Home extends Component {

    constructor() {
        super();
        this.state = { isAuthenticated: false, user: null, token: ''};
        this.setInputState = this.setInputState.bind(this);
    }

    /*logout = () => {
        this.setState({isAuthenticated: false, token: '', user: null})
    };*/

    responseFacebook(response) {
      console.log(response)
      const accessTokenBlob = new Blob([JSON.stringify({input_token: response.accessToken}, null, 2)], {type : 'application/json'});
      const options = {
          method: 'POST',
          body: accessTokenBlob,
          //mode: 'cors',
          cache: 'default'
      };
      fetch('http://localhost:8880/auth/facebook', options)
          .then((r) => r.json())
          .then(r => {
            console.log(r)
            if (r.status) {
                this.setState({isAuthenticated: true, user: response.id, token: response.accessToken})
            }
      });
    }

    componentDidMount() {
        browserHistory.push('/');
    }
    render() {
        console.log(this.state)
        let content = this.state.isAuthenticated ?
        (
            <div>
                <p>Authenticated</p>
                <div>
                    {this.state.user.name}
                </div>
                <div>
                    <button onClick={this.logout} className="button">
                        Log out
                    </button>
                </div>
            </div>
        ) : (
            <div>
            <FacebookLogin
                appId="2128489194096154"
                autoLoad={true}
                fields="name,id,picture"
                scope="public_profile"
                callback={this.responseFacebook} />
            </div>
        );
        return (
            <div className="App">
                {content}
            </div>
        );
    }
}

问题似乎发生在包含代码 this.setState({isAuthenticated: true, user: response.id, token: response.accessToken})

这一部分的行上

当我在浏览器的控制台上设置debug时，我将其视为来自this2错误堆栈链接的替换内容：

fetch('http://localhost:8880/auth/facebook', options).then(function (r) {
                return r.json();
            }).then(function (r) {
                console.log(r);
                if (r.status) {
                    _this2.setState({ isAuthenticated: true, user: response.id, token: response.accessToken });
                }
            });

我已经在这里待了将近一天，而我却完全迷失了-已经读了几篇文章-却一无所获。在我不断尝试解决这个问题时，如果问题仍然不清楚-请让我知道我还可以添加哪些细节。

编辑＃1

http://localhost:8880/auth/facebook，这是我编写的后端，这是我控制的东西。来自后端的响应日志和在前端接收的数据是相同的。这告诉我cors没有问题，也没有其他集成问题。

Answer 1

responseFacebook函数未绑定到class上下文。因此，this函数内的responseFacebook并不引用class。您可以使用这样的箭头功能

responseFacebook = (response) => {

或者您可以像这样在bind中显式constructor函数

    constructor() {
        super();
        this.state = { isAuthenticated: false, user: null, token: ''};
        this.setInputState = this.setInputState.bind(this);
        this.responseFacebook = this.responseFacebook.bind(this);
    }

反应_this2.setState不是函数-可能存在绑定问题

1 个答案: