在React中调用函数:Uncaught TypeError:...不是函数(...)

时间:2016-10-27 09:15:55

标签: javascript reactjs redux react-redux

我正在尝试添加用户,现在我只是尝试调用工作,因此到目前为止还没有传递数据。 Mycontainer看起来像这样:

用户add.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {createUser} from '../actions/index'

class UserCreate extends Component {
    render() {
        return (
            <div>
                <h2> Add User </h2>

                <table className="userTable">
                <tbody>
                <tr>
                    <td>First Name:</td>
                    <td>Last Name:</td>
                </tr>

                <tr>
                    <td>
                        <input type="text"
                            placeholder="Hello!"
                            value="Val" />
                    </td>
                    <td>
                        <input type="text"
                            placeholder="Hello!"
                            value="Val" />
                    </td>
                </tr>
                </tbody>
                </table>


                <button onClick={() =>this.props.createUser()}>Submit</button>

            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        user: state.activeUser
    };
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({createUser: createUser}, dispatch);
}

export default connect(mapStateToProps)(UserCreate);

在我的用户的reducer中,我已将相应的大小写添加到我的switch语句中:

switch (action.type) {
    case 'USER_DELETED':
        return state.filter(user => user.id !== action.userIdToDelete);
    case 'USER_CREATED':
        return state;
}

当然我还将动作添加到我的动作类似

export const createUser = () => {
    console.log("You created user: XX ");
    return {
        type: 'USER_CREATED',
        payload: {}
    }
};

然而,它给了我:

  

未捕获的TypeError:_this2.props.createUser不是函数(...)

有什么想法吗?我对此非常陌生,已经在这里发布了几次(但是其他问题),但我并不是真正理解什么是错的。如果你需要任何其他代码片段,请告诉我,我会发布它们。我知道发布的代码不完整,请记住我只想按钮调用函数等,实际创建用户是另一个问题。

1 个答案:

答案 0 :(得分:2)

您未在任何地方使用matchDispatchToPropsmapDispatchToProps?}。

您需要将其添加到您的连接中:

export default connect(mapStateToProps, mapDispatchToProps)(UserCreate);