javascript - antd分页组件'onChange'API在浏览器前后不调用

Question

浏览器前后无法调用'onChange' API，导致页面列表无法根据当前页面更新

onPageChange = (page, pageSize) => {
    const { dispatch } = this.props
    const param = {
        blogId: this.props.params.id,
        pageIdx: page,
        quantity: pageSize
    }
    dispatch(fetchIssues('getComments', param, ''))
    hashHistory.push({
        pathname: `/post/${this.props.params.id}`,
        query: { pageIdx: page }
    })
}
render() {
    return <Pagination onChange={onPageChange} total={50} />
}

Answer 1

First, you need to take into account the browser back or fore click event. that event call popstate The popstate event is fired each time when the current history entry changes (user navigates to a new state). That happens when user clicks on browser's Back/Forward buttons or when history.back(), history.forward(), history.go() methods are programatically called.

in Javascript

window.addEventListener('popstate', function(event) var r = confirm("You pressed a Back button! Are you sure?!");

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);