Реагировать - кнопки браузера назад и вперед не работают на нумерации страниц - PullRequest
Новая
       11

Реагировать - кнопки браузера назад и вперед не работают на нумерации страниц

0 голосов
/ 12 января 2019

Я разрабатываю приложение в ReactJS с использованием Derpibooru API (в основном для целей обучения).

В любом случае, в досках изображений содержится большое количество изображений, и их необходимо разбивать на страницы для управления содержимым, отображаемым на экране. Мне удалось запустить нумерацию страниц в моем приложении, но всякий раз, когда я хочу нажать кнопку браузера назад или вперед , ничего не происходит. У меня есть основной компонент под названием ImagePage, который отображает список изображений для внешнего интерфейса. В дополнение к этому компоненту существует несколько маршрутов (с использованием react-router-dom), которые идут к этому ImagePage компоненту (для целей повторного использования).

Теперь я копался в Интернете и знаю, что это может быть проблема с componentWillReceiveProps функцией жизненного цикла в React, и мне нужно что-то здесь сделать, чтобы кнопка браузера работала. Я пытался запросить еще один fetch к API для 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 откажется перемонтировать.

Большое спасибо за помощь!

...