Question

我正在尝试从我的React应用程序中的另一个函数调用一个函数。但我保留了这个错误：Error in login TypeError: Cannot read property 'loadDashboard' of undefined。我搜索了类似的案例，我能找到的是（1）我必须使用this关键字（2）我必须提到constructor内的函数。我已经做了两个为什么我一直得到错误？我的代码：

import React, { Component } from 'react';
import '../App.css';
var axios = require('axios');

class Login extends Component {
  constructor(){
    super();
    this.loadDashboard = this.loadDashboard.bind(this);
  }

  loadDashboard(token){
    axios({
      method:'get',
      url:'http://localhost:3000/api/dashboard',
      data: {
        Authorization: token
      },
      responseType:'stream'
    })
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log("Error in loading Dashboard "+error);
     });
  }

  handleOnSubmit = () => {
     console.log("submittwed");
     axios({
       method:'post',
       url:'http://localhost:3000/authenticate',
       data: {
         email: 'test@mail.com',
         password: 'apple'
       },
     })
      .then(function (response) {
        var token = response.data.auth_token;
        console.log(token);
        this.loadDashboard(token);
      })
      .catch(function (error) {
        console.log("Error in login "+error);
      });
   }

  render() {
    return (
      <div>
         Username: <input type="email" name="fname" /><br />
         Password: <input type="password" name="lname" /><br />
         <button onClick={this.handleOnSubmit}>LOG IN</button>
      </div>
    );
  }
}

export default Login;

注意：如果没有loadDashboard，handleOnSubmit功能就可以了。

，为什么将loadDashboard(token){..}更改为function loadDashboard(token){..}会给我Unexpected token错误？

Answer 1

您可以使用箭头功能在回调中使用正确的this上下文：

.then((response) => {
    var token = response.data.auth_token;
    console.log(token);
    this.loadDashboard(token);
  })

您也可以这样做，但arrow功能更顺畅：

axios.get("/yourURL").then(function(response) {
  this.setState({ events: response.data });
}.bind(this));

Answer 2

最顺畅的方法是在定义函数时使用arrow函数：

loadDashboard = (token) => {//Note the arrow function
    axios({
      method:'get',
      url:'http://localhost:3000/api/dashboard',
      data: {
        Authorization: token
      },
      responseType:'stream'
    })
     .then((response) => { //Note the arrow function
       console.log(response);
     })
     .catch((error) => {//Note the arrow function
       console.log("Error in loading Dashboard "+error);
     });
  }

这样您就不需要在构造函数中绑定函数，也不会丢失this的上下文。

无法读取undefined的属性'function'

2 个答案: