Я использую 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, который я отправляю из бэкэнда.Спасибо.