Question

我希望在表单被提交时调用函数/动作但是当提交触发器React put

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@domain.com" 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" };

我缺少什么？

问候。

Answer 1

您误用connect第二个参数：http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

你应该这样做

const mapDispatchToProps = dispatch => {
  return {
    login: data => dispatch(login(data)),
  }
}


export default connect(null, mapDispatchToProps)(LoginForm);

Proptypes上的React JS Prop函数未定义

1 个答案: