React 渲染页面比请求页面落后 1 页

Question

我在 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() 中呈现数据，而不是将其置于状态然后更新它？因为我认为这是问题的主要原因

Answer 1

我猜你应该打电话给this.setState 而不是this.state.rendered = returned。此外，动画不会以这种方式正确。我认为如果您在 setState 回调中调用动画，它应该会在组件重新渲染后发生（参见 reactjs.org/docs/react-component.html#setstate）