this.props.dispatch не является функцией в файле компонента JS.

В событии «onSelect» разбивки на страницы я вызываю функцию, которая определена вне рендеринга и в классе компонента. Но когда происходит запуск события ниже ошибки -

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

Пожалуйста, дайте мне знать, что я делаю неправильно?


reactjs dispatch
person Atul    schedule 21.06.2017    source источник
comment
Можете ли вы показать код, который вызывает/отображает ‹BlogList/›   -  person Garry Taylor    schedule 21.06.2017
comment
Я обновил код, пожалуйста, проверьте.   -  person Atul    schedule 21.06.2017

Ответы (2)


arrow_upward
1
arrow_downward

dispatch доступен компоненту, когда вы используете соединение, только если вы не переопределяете его пользовательской функцией. что в вашем случае является функцией mapDispatchToProps. Итак, что вы можете сделать, так это сделать действие push доступным в качестве реквизита для компонента, добавив его в функцию mapDispatchToProps, например

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

и использовать его как

changePage(page){
    alert(page);
    this.props.push('/?page_no='+page)
}
person Shubham Khatri    schedule 21.06.2017
comment
this.props.history.push(location.pathname+'?page_no='+page) это работает для меня.... спасибо #Shubham - person Atul; 22.06.2017

arrow_upward
0
arrow_downward

Вы можете попробовать поднять 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);
person Garry Taylor    schedule 21.06.2017
comment
Я сделал то же, что и вы, и экспортировал компонент следующим образом: ›››› export default connect(mapStateToProps, mapDispatchToProps, dispatch) (BlogList); , но теперь он выдает ошибку this.props.getBlogList is not a function, но это так. - person Atul; 21.06.2017
comment
Я думаю, что у вас есть аргументы не в том месте. оформить заказ github.com/reactjs /реакция-редукс/блоб/мастер/документы/ - person Garry Taylor; 21.06.2017