Question

我将Redux用于应用程序中的商店管理，并将axios用于XMLHttpRequest。我具有Api调用的通用功能。

api.js //这是api请求的通用函数。

rstan

我写了这个过程中的三四倍，但得到了同样的错误。在stackOverflow上尝试过，但我还没有。

auth.js //动作创建者

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);
        });
    });
};

handleSubmit.js //该功能负责API来与用户数据调用= this.state。

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
        });
    });
    };
}

Navbar.js //此处使用组件。

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;
    })
}

LoginForm.js //我发送api调用请求的表单页面。

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);

此函数应运行并返回我从后端发送的JSON响应。谢谢。

得到TypeError：_this.props.onAuth（...）。then不是一个函数

0 个答案: