Question

我是ReactJS的新手，我试图用react redux saga实现一个Crud应用程序。当我尝试提交表单时，出现以下错误：“ TypeError：_this.props.userCreate不是函数”。这是AddUser.js的形式：

    import React from 'react';

class AddUser extends React.Component {
  state = {
    email:'',
    password:''
  };

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

  handleSubmit = e => {
    e.preventDefault();
    if (this.state.email.trim() && this.state.password.trim()) {
      this.props.userCreate(this.state);
      this.handleReset();
    }
  };

  handleReset = () => {
    this.setState({
      email:'',
      password:''
    });
  };

  render() {
    return (
      <div>
          <form onSubmit={ this.handleSubmit }>
          <div className="form-group">

          <div className="form-group">
            <input
            type="text"
            placeholder="email"
            className="form-control"
            name="email"
            onChange={ this.handleInputChange }
            value={ this.state.email }
          />
          </div>
          <div className="form-group">
            <input
            type="text"
            placeholder="password"
            className="form-control"
            name="password"
            onChange={ this.handleInputChange }
            value={ this.state.password }
          />
          </div>


          <div className="form-group">
            <button type="submit" className="btn btn-primary">Add User</button>
          </div>
        </form>
      </div>
    );
  }
}

export default NewUser;

以及在容器中：AddUserPage.js：

 import { connect } from 'react-redux';
import { userCreate } from '../../../redux/users/actions';
import NewUser from './NewUser';

const mapDispatchToProps = dispatch => {


    function mapDispatchToProps(dispatch) {
  return { userCreate: (user) => {dispatch(actions.USER_CREATE)} }
  //return { userCreate: (user) => {dispatch(actions.userCreate(user))} }

} };

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

动作文件：

const actions = {
  USER_CREATE: 'USER_CREATE',
  USER_CREATE_SUCCESS: 'USER_CREATE_SUCCESS',
  USER_CREATE_FAILURE: 'USER_CREATE_FAILURE',
  userCreate: user => ({
    type: actions.USER_CREATE,
    payload: user
  }),
    /*
  onPageChange: (searcText, page) => ({
    type: actions.GIT_SEARCH,
    payload: { searcText, page }
  }),*/
  userCreateSuccess: (user) => ({
    type: actions.USER_CREATE_SUCCESS,
    user
  }),
  userCreateError: () => ({
    type: actions.USER_CREATE_FAILURE
  })
};
export default actions;

Reducers：UserReducer.js

import actions from '../actions';
const UserReducer = (state = [], action) => {
    switch (action.type) {
        case actions.USER_CREATE_SUCCESS:
                   return state.concat([action.payload]);
        case actions.USER_CREATE_FAILURE:
            return { ...state, error: true };
        default:
            return state;
    }
};

导出默认的UserReducer；

对这个问题有任何想法吗？感谢您的帮助。

TypeError：_this.props.userCreate不是函数

0 个答案: