Question

我正在使用React Router创建带有分页的react应用。更改页面时，我无法获取要加载的页面内容。我知道，如果您在页面上并在React Router componentDidMount()中加载同一页面，则不会再次触发，因为该组件已经安装在加载的页面上。

按原样，如果在页面已加载时单击分页链接，它将使单击的分页链接处于活动状态，并更新地址栏中的URL。但是，它将不会向后端服务器发送请求或更新页面内容。

// App.js
<Route path={['/content', '/content/p/:page']} exact component={PagedContent}></Route>

// paged-content.component.js
import React, { Component } from 'react';
import { LinkContainer } from 'react-router-bootstrap';

export default class PagedContent extends Component {
    state = { items, page: this.props.match.params.page ? this.props.match.params.page : 1 }

    componentDidMount() {
        fetch(`/page/${this.state.page}`)
            .then(res => res.json())
            .then(json => {
                let items = [];
                for (let number = 0; number <= json.maxPage; number++) {
                    items.push(
                        <LinkContainer to={"/page/" + number}>
                            <Pagination.Item key={number} active={number === this.state.page}>
                                {number}
                            </Pagination.Item>
                        </LinkContainer>
                    );
                }
                this.setState({ items: items, content: json.content, page: this.props.match.params.page });
            });
    }
    render() {
        return (
            <div>
                <p>You are on page: {this.state.page}</p>
                <Pagination>{this.state.items}</Pagination>
                {this.state.content}
            </div>
        )
    }
}

我看到了一个与问题here相似的非常相似的问题，但是被接受的答案似乎并没有达到预期的效果。如果将componentDidMount()替换为componentDidUpdate()，则会引入两个新问题。首先是我的后端服务器日志显示，反应陷入了无限循环，无法将提取请求发送到后端，这可能是因为我正在更新componentDidUpdate()中的状态。第二个是componentDidUpdate()似乎不会在初始页面加载时被触发，只有在我已经在已加载的页面内容页面上单击分页链接时，才会开始被触发。

我该如何解决这些问题？

React Router：使用componentDidMount（）/ componentDidUpdate（）的分页无法正常工作

0 个答案: