Question

Redux的新手。我正在工作的地方跟随一个示例，尝试使用无状态组件创建Facebook登录按钮。我似乎无法完成将clickHandler属性绑定到任何描述函数的基本操作。在下面的示例中，我将其简化为简单的控制台日志。无论我做什么，当我单击按钮时，都会显示“ 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并且没有传递任何道具，那么clickHandler确实不是一个函数。

Answer 2

您正在将单击处理程序放在mapDispatchToProps函数内，该函数用于将操作分配给商店。通常，您不会在mapStateToProps或mapDispatchToProps函数中定义事件处理程序。如果将其放在mapStateToProps函数中，它应该可以工作，但我宁愿像在组件中那样定义它：

import React from 'react';

const FacebookLoginComponent = (props) => {
    const clickHandler = () => console.log("Hello World");

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

并将其从您的容器中删除。

您还将在mapDispatchToProps处理程序中使用dispatch（）包装动作，如此处所示：https://react-redux.js.org/using-react-redux/connect-mapdispatch

React Redux：使用mapDispatchToProps后，``X不是函数''

2 个答案: