Question

我正在使用Derpibooru API在ReactJS中开发一个应用程序（主要用于学习目的）。

无论如何，图像板包含大量图像，因此需要对它们进行分页以控制屏幕上显示的内容。我确实设法使分页在我的应用程序上正常运行，但是每当我想按浏览器的后退或前进按钮时，它都不会执行任何操作。我有一个名为ImagePage的主要组件，它在前端显示图像列表。除了此组件之外，还有多个路由（使用react-router-dom）进入此ImagePage组件（出于可重用目的）。

现在我正在网上浏览，我知道这可能是React中componentWillReceiveProps生命周期函数的问题，我需要在此处做一些事情以使浏览器后退按钮正常工作。我尝试向API请求另一个fetch来GET数据，但是尝试失败。

以下是供您考虑的代码：

[...] // import stuff above

class ImagePage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            images: {},
            activePage: 1
        }
    }

    componentWillReceiveProps(nextProps) {
        if ( nextProps.match.params.q !== this.props.match.params.q ) {
            this.setState({ activePage: 1 })
            if ( nextProps.match.path === '/tags/:tag' ) {
                fetch(`//derpibooru.org/tags/${nextProps.match.params.tag}.json`)
                .then(res => res.json())
                .then(data => this.setState({ images: data }))
            } else if ( nextProps.match.path === '/favorites/:user' ) {
                fetch(`//derpibooru.org/search.json?q=faved_by%3A${nextProps.match.params.user}`)
                .then(res => res.json())
                .then(data => this.setState({ images: data }))
            } else {
                fetch(`//derpibooru.org/search.json?q=${nextProps.match.params.q ? nextProps.match.params.q : "*" }`)
                .then(res => res.json())
                .then(data => this.setState({ images: data }))
            }
        }
    }

    handlePageChange = pageNumber => {
        this.setState({activePage: pageNumber});
        if ( this.props.match.path === '/tags/:tag' || this.props.match.path === '/tags/:tag/page/:page' ) {
            fetch(`//derpibooru.org/tags/${this.props.match.params.tag}.json?page=${pageNumber}&q=${this.props.match.params.tag}`)
            .then(res => res.json())
            .then(data => this.setState({ images: data }))
            this.props.history.push(`/tags/${this.props.match.params.tag}/page/${pageNumber}`)
        } else if ( this.props.match.path === '/favorites/:user' || this.props.match.path === '/favorites/:user/page/:page' ) {
            fetch(`//derpibooru.org/search/index.json?page=${pageNumber}&q=faved_by%3A${this.props.match.params.user}`)
            .then(res => res.json())
            .then(data => this.setState({ images: data }))
            this.props.history.push(`/favorites/${this.props.match.params.user}/page/${pageNumber}`)
        } else {
            fetch(`//derpibooru.org/search/index.json?page=${pageNumber}&q=${this.props.match.params.q ? this.props.match.params.q : "*"}`)
            .then(res => res.json())
            .then(data => this.setState({ images: data }))
            if ( this.props.match.path === '/search/:q' || this.props.match.path === '/search/:q/page/:page' ) {
                this.props.history.push(`/search/${this.props.match.params.q}/page/${pageNumber}`)
            } else {
                this.props.history.push(`/page/${pageNumber}`)
            }
        }
    }
    [...] //render stuff
}

单击分页的按钮本身时，该应用程序运行正常；但是，我浏览了几页并决定返回一页或两页，ImagePage组件将拒绝重新安装。

非常感谢您的帮助！

反应-浏览器的前进和后退按钮在分页上不起作用

0 个答案: