Question

我将根据https://auth0.com/blog/adding-authentication-to-your-react-flux-app//

教程在我的reactjs应用程序中实现登录身份验证

我已经编写了一个名为AuthService的类，并且在AuthService内部，我有一个名为Login的函数，如下所示

import LoginActions from './LoginAction';
const URL_LOGIN = 'loginurl';
class AuthService {
   login(username, password) {
     // do something
  }
}

现在，我在我的登录组件中调用此Login方法，如下所示

//this function is to save data to the API
loginUser = (user) => {
  // Here, we call an external AuthService.
    Auth.login(user.username, user.password)
    .catch(function(err) {
      console.log("Error logging in", err);
      console.log(err);
    });

一切正常，但提交数据时出现错误

TypeError： WEBPACK_IMPORTED_MODULE_4__authentication_AuthService .a.login（...）未定义

当我在AuthService类的login方法上登录日志时，看到返回的数据。我一直在寻找针对此错误的快速解决方案，但还没有得到。任何帮助，将不胜感激。我不想将此操作带到组件上，因为我还将在应用程序的其他区域中使用它。

此外，我是Reactjs的新手，因为这是我在这里进行的第一个身份验证。

Answer 1

在AuthService类的登录方法之前添加static关键字。

Answer 2

我正在等待djfdev看到他的评论中的答案：

您已将login定义为实例方法，但正在像静态方法一样调用它。在函数名称之前添加static关键字，或者在调用log之前创建Auth实例。

但是他似乎没有提供答案。他的意思是您可以定义一个静态方法，例如：

static login(username, password) {

或在以下实例中调用登录方法：

const auth = new Auth
auth.login(user.username, user.password)

此外，希望您导出的类如下：

export default AuthService

并像这样导入它：

import Auth from '...'

Answer 3

根据我对OP的评论：

您已将login定义为实例方法，但正在像静态方法一样调用它。在函数名称之前添加static关键字，或者在调用log之前创建Auth实例。

因此，您有两个选择：A）使用static关键字在类本身上定义方法：

import LoginActions from './LoginAction';
const URL_LOGIN = 'loginurl';
class AuthService {
   static login(username, password) {
     // do something
  }
}

或者B）在调用登录方法之前创建Auth的实例：

loginUser = (user) => {
  // Here, we call an external AuthService.
  new AuthService().login(user.username, user.password)
    .catch(function(err) {
      console.log("Error logging in", err);
      console.log(err);
  });

请参阅static的MDN文档

Answer 4

通过解决上述问题，我将静态方法添加到登录方法中，并从中删除了问题。

在Component中调用react类的方法

4 个答案: