reactjs - react Redux : 'X is not a function' after using mapDispatchToProps

Question

对 Redux 来说非常陌生。我正在按照我工作场所的示例尝试使用无状态组件创建 Facebook 登录按钮。我似乎无法完成将 clickHandler 属性绑定(bind)到任何描述的函数的基本操作。在下面的示例中，我已将其简化为简单的控制台日志。无论我做什么，当我单击按钮时，我都会得到“clickHandler 不是一个函数”。我做错了什么？

组件

import React from 'react';

const FacebookLoginComponent = (props) => {
    const {
        clickHandler
    } = props;
    return(
        <button className="btn btn-primary" onClick={ () => clickHandler() }>Say hello</button>
    )
}
export default FacebookLoginComponent;

容器

import { connect } from 'react-redux';
import FacebookLoginComponent from "../components/FacebookLogin";

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
    clickHandler: () => console.log('hello')
})

const FacebookLogin = connect(
    mapStateToProps,
    mapDispatchToProps,
)(FacebookLoginComponent);

export default FacebookLogin;

Answer 1

我怀疑您可能错误地使用了未连接的 FacebookLoginComponent，而不是已连接的 FacebookLogin。

如果您使用的是FacebookLoginComponent并且没有传入任何 Prop ，那么clickHandler确实不是一个函数。