Страница реагирования отображается на 1 страницу за запрашиваемой страницей - PullRequest
Новая
       110

Страница реагирования отображается на 1 страницу за запрашиваемой страницей

0 голосов
/ 30 апреля 2020

У меня есть состояние в Redux, называемое page, и оно меняется всякий раз, когда я нажимаю URL-адрес другой страницы. Это сделано для того, чтобы у моего сайта был только один URL. Всякий раз, когда я запрашиваю новую страницу, она обновляется только при следующем нажатии. Например, когда я нажимаю Login, ничего не происходит. Затем, когда я нажимаю Register, страница Login отображается. Затем, когда я нажимаю About, отображается страница Register. Почему страница отрисовывает 1 страницу медленно? Есть ли способ это исправить? Я хочу сделать анимацию затухания на странице, а затем заставить новую страницу появиться. Это как-то связано с необходимостью использовать nextProps? Я где-то слышал об этом, но я не знаю, что это такое, и не знаю, как его использовать. 

import React, { Component } from 'react'

// Redux
import { connect } from "react-redux"

// Components
import Login from './routes/Login'
import About from './routes/About'
import Register from './routes/Register'
import Chat from './routes/Chat'

// PropTypes
import PropTypes from 'prop-types'

class Renderer extends Component {
    state = {
        rendered: <About /> // Default page to render
    }

    static propTypes = {
        page: PropTypes.string.isRequired
    }

    componentDidUpdate(prevProps) {
        const main = document.getElementsByTagName('main')[0] // Where the rendered page should be

        if (this.props.page !== prevProps.page) { // If page state changes

            main.style.animation = "fadeOut 0.5s forwards" // Fade old page
            setTimeout(() => { // After faded
                let returned

                switch (this.props.page) {
                    case 'About':
                        returned = <About />
                        break
                    case 'Login':
                        returned = <Login />
                        break
                    case 'Register':
                        returned = <Register />
                        break
                    case 'Chat':
                        returned = <Chat />
                        break
                    default:
                        returned = <About />
                }

                this.state.rendered = returned
                main.style.animation = "fadeIn 0.5s forwards" // Show new page
            }, 500)

        }
    }

    render() {
        return this.state.rendered
    }
}

const mapStateToProps = state => ({
    page: state.page
})

export default connect(mapStateToProps)(Renderer)

Есть ли способ отобразить данные в componentDidUpdate() вместо того, чтобы переводить их в состояние обновить это? Потому что я думаю, что это главная причина проблемы

1 Ответ

1 голос
/ 30 апреля 2020

Полагаю, вам следует звонить this.setState, а не this.state.rendered = returned. Кроме того, анимация не будет правильной. Я думаю, что это работает, если вы вызываете анимацию внутри обратного вызова setState, что должно произойти после повторного рендеринга компонента (см. reactjs .org / docs / Reaction-component.html # setstate )

...