bugfix> reactjs > 投稿

「Login」コンポーネントから呼び出しようとしている「signIn()」関数を持つ「Auth」クラスがあり、「Login」でコールバックを使用しようとすると「not a function」というエラーが返されます。

プロップ( this.props.auth.signIn() など)を使用してAuthクラス/サービスを参照しようとしました )、およびLoginコンポーネントのクラスの呼び出しを介して直接( this.auth など) )、ただし両方とも同じエラーになります。

私はAuth0の反応サンプルの公式ドキュメントで使用されている方法に従うことを試みていますhttps://github.com/auth0-samples/auth0-react-samples/blob/embedded-login/02-Custom-Login-Form/src/Login/Login.js。

Auth.js:

import auth0 from 'auth0-js';
import { auth_config } from './auth0-config';
import createHistory from 'history';
export default class Auth {
  auth0 = new auth0.WebAuth({
      ...
  })
  constructor() {
        this.signIn = this.signIn.bind(this);
  }
  signIn(username, password) {
        this.auth0.login(
              {
                    realm: auth_config.dbConnectionName,
                    username,
                    password
              },
              (err, authResult) => {
                    if (err) {
                          console.error('Authentication error at \'services/auth/Auth.js\' - signIn() method:', err);
                          alert(`Error: ${err.description}. Check the console for further details.`);
                    }
              }
        )
  }

Login.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Auth from 'services/auth/Auth.js';
import { Dimmer, Modal, Header, Form, Button } from 'semantic-ui-react';
export default class LoginComponent extends React.Component {
  constructor() {
    super();
    this.state = {
        showModal: true,
        username: null,
        password: null,
        authorised: false
    }
  }
  componentDidMount() {
    console.log('Login.props:', this.props);
  }
  hide = () => {
    console.log('LoginComponent.hide()');
    this.setState({
        showModal: false
    })
  }
  getLoginCredentials() {
    return {
        email: ReactDOM.findDOMNode(this.refs.email).value,
        password: ReactDOM.findDOMNode(this.refs.password).value
    }
  }
  signIn() {
    //   console.log('LoginComponent.signIn(\'' + this.state.username + '\', \'' + this.state.password + '\')');
    const user = this.getLoginCredentials();
    this.props.auth.signIn(user.email, user.password);
  }

回答 1 件
  • クラスのオブジェクトを作成する必要があり、そのオブジェクトを使用して、Login.js内で関数を呼び出すことができます。

    signIn() {
        const user = this.getLoginCredentials();
        let signinObj = new Auth();
        signinObj.signIn(user.email, user.password);
      }
    
    

    編集:githubページのrouter.jsファイルで、このステートメントを確認できます。

     <Route path="/login" render={(props) => <Login auth={auth} {...props} />} />
    
    

    authは、小道具としてLoginクラスに渡されるこのクラスのオブジェクトです。

あなたの答え