Я хочу вызвать функцию/действие при отправке формы, но когда триггер отправки React помещает
TypeError: this.props.login(...) is undefined
Это страница Login.js:
import React from 'react';
import PropTypes from 'prop-types';
import Empty from '../Layouts/Empty';
import { Button } from '../UI/Button';
import axios from 'axios'
import Notifications, {notify} from 'react-notify-toast';
import { connect } from 'react-redux'
import { login } from '../../actions/login'
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
isLoading: false
};
this.onChange = this.onChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
handleSubmit(event) {
event.preventDefault();
this.setState({ isLoading: true });
this.props.login(this.state).then(function(response) {
if (response.status == 404){
return response.json().then(function(val) {
let myColor = { background: '#f44242', text: "#FFFFFF" };
notify.show(val.message, "custom", 5000, myColor);
});
}else if (response.status == 200){
return response.json().then(function(val) {
let myColor = { background: '#3AB54A', text: "#FFFFFF" };
notify.show("Welcome!", "custom", 5000, myColor);
})
}else if (response.status == 422){
return response.json().then(function(val) {
let myColor = { background: '#f44242', text: "#FFFFFF" };
notify.show("The email/password field is required", "custom", 5000, myColor);
})
}
}).catch(function() {
let myColor = { background: '#f44242', text: "#FFFFFF" };
notify.show("Error en comunicacion" , "custom", 5000, myColor);
});
}
render() {
const {email, password, isLoading} = this.state;
return (
<Empty>
<div className='main'>
<Notifications />
</div>
<h1>Welcome Again</h1>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Email</label>
<input type="email" placeholder="[email protected]" name="email" value={email} className="form-control" onChange={this.onChange}/>
</div>
<div className="form-group">
<label>Password</label>
<input type="password" placeholder="***********" name="password" value={password} className="form-control" onChange={this.onChange} />
</div>
<div className="form-group form-group-button">
<button type="submit" className="button button-primary button-right button" style={{width: "100%"}} disabled={isLoading}>LOGIN</button>
</div>
</form>
<div className="form-description">
<Button to='#' classes="button-block button-google">Login using Google+</Button>
<Button to='#' classes="button-block button-facebook">Login using Facebook</Button>
</div>
</Empty>
);
}
}
LoginForm.propTypes = {
dispatch: PropTypes.func,
login: PropTypes.func.isRequired
};
export default connect(null, { login })(LoginForm);
Действие над действиями папки:
export function login(data) {
return dispatch => {
fetch('MY_URL', {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: data
});
}
}
И ошибка при отправке триггера:
TypeError: this.props.login(...) is undefined
handleSubmit
src/components/Pages/Login.js:30
27 | handleSubmit(event) {
28 | event.preventDefault();
29 | this.setState({ isLoading: true });
> 30 | this.props.login(this.state).then(function(response) {
31 | if (response.status == 404){
32 | return response.json().then(function(val) {
33 | let myColor = { background: '#f44242', text: "#FFFFFF" };
Что мне не хватает?
С Уважением.
LoginForm.propTypes = { dispatch: PropTypes.func, login: PropTypes.func.isRequired }; const mapDispatchToProps = dispatch => { return { login: data => dispatch(login(data)), } } export default connect(null, mapDispatchToProps)(LoginForm);
01.11.2017TypeError: this.props.login(...) is undefined handleSubmit src/components/Pages/Login.js:30 27 | handleSubmit(event) { 28 | event.preventDefault(); 29 | this.setState({ isLoading: true }); > 30 | this.props.login(this.state).then(function(response) { 31 | if (response.status == 404){ 32 | return response.json().then(function(val) { 33 | let myColor = { background: '#f44242', text: "#FFFFFF" };
01.11.2017console.log(this.props)
в методыhandleSubmit
иrender
, чтобы увидеть значения и совпадают ли они? 01.11.2017this.props.login
существует. Можете просто попробовать позвонитьthis.props.login(this.state)
безthen
? (Это действительно отладка прямо сейчас, чтобы точно знать, где проблема, чтобы решить ее позже) 01.11.2017login
вactions.js
вы ничего не возвращаете :) Рад, что это вам помогло! 01.11.2017isFetching
иdidInvalidate
. Например, в коде вы можете увидеть некоторую обработку ошибок с помощьюADD_CONTACT_ERROR
. В основном вы ловите ошибку вaction
и добавляете ошибку в свой редуктор и отображаете ее, если она есть в компоненте. 01.11.2017