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

Question

在分页 'onSelect' 事件中，我调用了一个在渲染外部和组件 class 中定义的函数。但是当事件触发低于错误时 -

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

这是我的代码片段 -

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);

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

Answer 1

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

Answer 2

dispatch 在您使用 connect 时仅当您不使用自定义函数覆盖它时才可用于该组件。在你的例子中是一个 mapDispatchToProps 函数。因此，您可以做的是通过将 push 操作添加到 mapDispatchToProps 函数中，使 push 操作可用作组件的道具，例如

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

并像

一样使用它

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

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

this.props.dispatch is not a function in react js component file

dispatch

reactjs