Reactjs this.props.dispatch不是react js组件文件中的函数

在分页“onSelect”事件中，我调用了一个在呈现外部和组件类中定义的函数。但当事件触发低于错误发生时-

BlogList.js:101未捕获类型错误：this.props.dispatch不是一个函数

这是我的代码snippit-

import React from 'react'; 
import StaticLayout from '../Layout/StaticLayout';
import { Link } from 'react-router-dom';
import { getBlogList } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; 
import dateFormat from 'dateformat';

import { Pagination } from 'react-bootstrap'; 
import { push } from 'react-router-redux'; 
import queryString from 'query-string'


class BlogList extends React.Component {
    constructor(props){
        super(props);
        document.title = "Blogs";

        this.changePage = this.changePage.bind(this);
    }

    componentDidMount() {
        this.props.getBlogList();
    }

    render(){

        //===pagination variable========
        const per_page = 1;
        let pages = 0;
        if(this.props.blogListData !== undefined){
            pages = Math.ceil(this.props.blogListData.count / per_page) ;
        } 
        const current_page = this.props.page;
        const start_offset = (current_page - 1) * per_page;
        let start_count = 0;
        //===End pagination variable========


        return(
            <StaticLayout>
                <blog list related html />
                <Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundaryLinks items={pages} activePage={current_page} onSelect={this.changePage} />
            </StaticLayout>
        );  
    }

    changePage(page){
        alert(page);
        this.props.dispatch(push('/?page_no='+page))
    }


}


function mapStateToProps(state,ownProps){
    var queryParam = queryString.parse(ownProps.location.search);
    return { 
        blogListData: state.UserReducer.blogData,
        page: Number(queryParam.page_no) || 1,
    }
}

function mapDispatchToProps(dispatch) {
      return bindActionCreators({getBlogList: getBlogList}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (BlogList);

从“React”导入React；
从“../Layout/StaticLayout”导入StaticLayout；
从'react router dom'导入{Link}；
从“../actions/signupActions”导入{getBlogList}；
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“dateFormat”导入dateFormat；
从'react bootstrap'导入{Pagination}；
从“react router redux”导入{push}；
从“查询字符串”导入查询字符串
类BlogList扩展了React.Component{
建造师（道具）{
超级（道具）；
document.title=“博客”；
this.changePage=this.changePage.bind（this）；
}
componentDidMount（）{
this.props.getBlogList（）；
}
render（）{
//==分页变量========
每页常数=1；
设pages=0；
if（this.props.blogListData！==未定义）{
pages=Math.ceil（this.props.blogListData.count/per_page）；
} 
const current_page=this.props.page；
常量开始偏移量=（当前页面-1）*每页；
让start_count=0；
//==结束分页变量========
返回(
);  
}
更改页面（第页）{
警报（第页）；
此.props.dispatch（推送（'/？页码='+页码））
}
}
函数mapStateToProps（状态，ownProps）{
var queryParam=queryString.parse（ownProps.location.search）；
返回{
blogListData:state.UserReducer.blogData，
页码：编号（查询参数。页码）| | 1，
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{getBlogList:getBlogList}，dispatch）
}
导出默认连接（MapStateTrops、mapDispatchToProps）（BlogList）；

---

请让我知道我做错了什么

您可以尝试将changePage提升到connect。我发现这个模型更容易阅读和维护

function mapStateToProps(state,ownProps){
  var queryParam = queryString.parse(ownProps.location.search);
    return { 
      blogListData: state.UserReducer.blogData,
      page: Number(queryParam.page_no) || 1,
   }
}

const dispatch = (dispatch, ownProps) => ({
  changePage: (page) => {
    alert(page);
    dispatch(push('/?page_no='+page))
  }
});

export default connect(mapStateToProps, dispatch) (BlogList);

---

当您使用connect时，只有在您并没有使用自定义函数覆盖它的情况下，组件才可以使用

dispatch

。在您的情况下，这是一个

mapDispatchToProps

函数。因此，您可以通过将

push

操作添加到

mapDispatchToProps

函数中，使其作为组件的道具可用

function mapDispatchToProps(dispatch) {
  return bindActionCreators({getBlogList: getBlogList, push: push}, dispatch)
}

像这样使用它

changePage(page){
    alert(page);
    this.props.push('/?page_no='+page)
}

---

你能显示调用/呈现的代码吗？我已经更新了代码，请检查。我做的和你说的一样，导出组件->>>

导出默认连接（mapStateToProps，mapDispatchToProps，dispatch）（BlogList）

但是现在它的给出错误是this.props.getBlogList不是一个函数，而是一个函数。我想你的参数放错地方了。签出

this.props.history.push（location.pathname+'？page_no='+page）

这对我很有用。。。。谢谢#Shubham