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 ）

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

React Rendered page is 1 page behind requested page

javascript

reactjs

rendering

react-props

react-state-management