Question

我试图通过Redux的连接注入NavigationButtons的click事件监听器。但是，即使它们通过了propTypes验证，也没有正确定义这些函数。以下示例：

import React, { PropTypes } from "react"
import { connect } from "react-redux"

import { previousPage, nextPage } from "../actions"

const NavigationButtons = ( onPrevPageClick, onNextPageClick, firstPage = false ) => (
    <div className="navigation-buttons">
        {!firstPage && <div className="previous button" onClick={onPrevPageClick}>Previous Page</div>}
        <div className="next button" onClick={onNextPageClick}>Next page</div>
        <div className="clearfix"></div>
    </div>
);

NavigationButtons.propTypes = {
    onPrevPageClick: PropTypes.func.isRequired,
    onNextPageClick: PropTypes.func.isRequired
};

const mapStateToProps = ({ page }) => {
    return {
        firstPage: page == 0
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        onPrevPageClick: () => {
            dispatch(previousPage())
        },
        onNextPageClick: () => {
            dispatch(nextPage())
        }
    }
};

const NavigationButtonsContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(NavigationButtons);

export default NavigationButtonsContainer

Answer 1

缺少函数声明中的括号。它应该是：

const NavigationButtons = ({ onPrevPageClick, onNextPageClick, firstPage = false })

而不是：

const NavigationButtons = (onPrevPageClick, onNextPageClick, firstPage = false)

未捕获的不变违规：预期onClick监听器是一个函数，而不是类型对象

1 个答案: