получение TypeError: _this.props.onAuth (...). тогда не является функцией - PullRequest
0 голосов
/ 02 февраля 2019

Я использую Redux для управления магазином в своем приложении и использую axios для XMLHttpRequest.У меня есть универсальная функция для вызова API.

api.js // Это универсальная функция для запроса API.

import axios from 'axios';

export function apiCall(method, path, userData){
    return new Promise((resolve, reject) => {
        return axios[method](path, userData).then(res => {
            return resolve(res.data);
        })
        .catch(err => {
            return reject(err.response.data.error);
        });
    });
};

Я написал этот курс три-четыре раза, но получаю то же самоеошибка.Пробовал на stackOverflow, но я не получил.

auth.js // action creator

import {SET_CURRENT_USER} from "../../actionTypes";
import {apiCall} from "../../../services/api"; 

export function setCurrentUser(user){
    return{
        type: SET_CURRENT_USER,
        user
    }
}

export function authUser(type, userData) {
    return dispatch => {
    return new Promise((resolve, reject) => {
        return apiCall("post", `/api/auth/${type}`, userData)
        .then(({ token, ...user }) => {
            localStorage.setItem("jwtToken", token);
            dispatch(setCurrentUser(user));
            resolve(); // indicate that the API call succeeded
        })
        .catch(err => {
            reject(); // indicate the API call failed
        });
    });
    };
}

handleSubmit.js // эта функция отвечает за вызов API с данными пользователя = this.state.

handleSubmit = e => {
    e.preventDefault();
    const authType = "signup";
    console.log(this.state);
    this.props.onAuth(authType, this.state) // Getting error here.
    .then(() => {
        console.log("Successfully logged in.");
    })
    .catch(() => {
        return;
    })
}

Navbar.js // здесь используется компонент.

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import LoginForm from '../../components/auth-form/LoginForm';
import './Navbar.css';
import {authUser} from '../../store/actions/auth/auth';

class Navbar extends Component{
    render(){
        return(
            <div>
                <nav className="navbar navbar-extend navbar-light">
                    <div className="container">
                        <div className="navbar-brand">
                            <Link className="navbar-brand nav-head" to="/">
                                <strong>facebook</strong>
                            </Link>
                        </div>
                        {!this.props.currentUser.isAuthenticated ? (
                            <div><LoginForm onAuth={authUser}/></div>
                        ) : (
                            <div>
                                <p>You are now logged in.</p>
                            </div>
                        )}
                    </div>
                </nav>
            </div>
        )
    };
};

function mapStateToProps(state){
    return{
        currentUser:state.currentUser
    }
}

export default connect(mapStateToProps, {authUser})(Navbar);

LoginForm.js // Страница формы, с которой я отправляю запрос вызова API.

    import React, {Component} from 'react';
    import propTypes from 'prop-types';

    class LoginForm extends Component{
        constructor(props){
            super(props);
            this.state = {
                email:"",
                password:""
            }
        }

        handleSubmit = e => {
            e.preventDefault();
            const authType = "signin";
            this.props.onAuth(authType, this.state)
            .then(() => {
                console.log("Logged in.");
            })
            .catch((err) => {
                console.log("Not logged in.");
                return;
            });
        };

        handleChange = e => {
            this.setState({[e.target.name]:e.target.value})
        };

        render(){
            const {email, password} = this.state;
            return(
                <form className="display-inline" onSubmit={this.handleSubmit}>
                    <div className="login-form-component">
                        <label htmlFor="email">Email</label>
                        <input 
                            onChange={this.handleChange}
                            type="email"
                            name="email"
                            value={email}
                            id="login-email">
                        </input>
                    </div>
                    <div className="login-form-component">
                        <label htmlFor="login-password">Password</label>
                        <input 
                            onChange={this.handleChange}
                            type="password"
                            value={password}
                            name="password"
                            id="login-password">
                        </input>
                    </div>
                    <button type="submit">Login</button>
                </form>
            )
        }
    };

    LoginForm.propTypes = {
        onAuth:propTypes.func
    }

    export default LoginForm;

Эта функция должна запуститься и вернуть мне ответ JSON, который я отправляю из бэкэнда.Спасибо.

...