Question

在分页'onSelect'事件中，我调用的是一个在render之外和组件类中定义的函数。但当事件发生时，错误即将来临 -

BlogList.js:101 Uncaught TypeError: this.props.dispatch is not a function

这是我的代码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);

pz让我知道我做错了什么？

Answer 1

仅当您未使用自定义函数覆盖连接时，

dispatch才可用于组件。在您的情况下，它是mapDispatchToProps函数。因此，您可以将push操作作为组件的支柱提供，方法是将其添加到mapDispatchToProps函数，如

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

并像

一样使用它

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

Answer 2

您可以尝试将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);

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

2 个答案: