时间戳

首页 > 解决方案 > 先渲染页面，然后数据才进来，但是页面上还保留着旧数据

javascript - 先渲染页面，然后数据才进来，但是页面上还保留着旧数据

问题描述

过渡是通过 react-router 完成的。我正在尝试使用 Redux 制作第一个项目，但遇到了我的页面正在加载目前不需要的数据的问题。

更具体地说，我在一个表单中有 2 个类，用于选择 3 个组件中的 1 个，索引 1 分别附加到 2 和 3。在控制台中，您可以看到当单击时，Redux 会拾取 Store 中的数据。

选择任何组件后，进入下一页的按钮变为可用。切换到它之后，我想在角落里显示已经输入的数据，但是那里已经输入了一个默认值。我得出的结论是，第二个页面在用户选择选项之前不可用，它在选择之前呈现并且之后不更新，这就是默认挂起的原因。

也许有一个选项可以禁止渲染，直到标志采用不同的值或类似的东西？ 在此处输入图像描述

图片显示在最后一个文件中，值 0 立即被取，不再改变。我的代码

import React, { Component } from 'react'
import { Card,CardGroup,Button,Navbar,Nav } from 'react-bootstrap'
import A2 from '../assets/A2example.png'
import A3 from '../assets/A3example.png'
import A4 from '../assets/A4example.png'
import {BrowserRouter,  Route, Switch, Link, } from 'react-router-dom'
import ZakazPortretaSecond from '../pages/ZakazPortretaSecond';
import store from '../redux/store'
import { connect } from 'react-redux'


class ZakazPortreta extends Component {
    constructor(props){
        super(props)

        this.state = {
            choosen: 4
        }     
    }
        portretSize(a){
            this.setState({
                choosen: a
            })
            store.dispatch({
                type: 'SET_FORMAT_BY',
                payload: a,
            })
            console.log(store.getState())
    }
    render() {
        return (
            <div className = "ZakazDiv">
                <h2>Выберите желаемый размер портрета:A{this.state.choosen}</h2><br/>
                <Navbar.Toggle aria-controls = "responsive-navbar-nav">
                <Link to="/ZakazPortretaSecond" >Далее</Link>
                </Navbar.Toggle>
                <CardGroup>
                    <Card>
                        <Card.Body className = "cards" onClick={()=> this.portretSize(4)}>
                            <Card.Title>А4</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">210×297 мм</Card.Subtitle>
                            <Card.Text>
                                <img src = {A4} width = "370" height = "550"/>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                    <Card >
                        <Card.Body className = "cards" onClick={()=> this.portretSize(3)}>
                            <Card.Title>А3</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">297 x 420 мм</Card.Subtitle>
                            <Card.Text>
                            <img src = {A3} width = "370" height = "550"/>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                    <Card >
                        <Card.Body className = "cards" onClick={()=> this.portretSize(2)}>
                            <Card.Title>А2</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted"> 420 x 594 мм</Card.Subtitle>
                            <Card.Text>
                            <img src = {A2} width = "370" height = "550"/>
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </CardGroup>
                <BrowserRouter >
                    <div>
                        <Nav />
                        <Route path="/ZakazPortretaSecond" component={ZakazPortretaSecond} />
                    </div>
                    </BrowserRouter >
            </div>
        )
    }
    
}

const mapStateToProps = (state) => {
    console.log("Actual value",store.getState())
    return{
        format: state.format,
    }
}


export default connect(mapStateToProps)(ZakazPortreta)

和第二个文件

import React, { Component } from 'react'
import store from '../redux/store'

console.log("inside last file",store.getState())

class ZakazPortretaSecond extends Component {
    render() {
        return (
            <div>
                <h2 className='textSecond text-center'>Вы выбрали:A{store.format}</h2> 
            </div>
        )
    }
}

export default ZakazPortretaSecond

标签： javascriptreactjsreduxreact-reduxreact-router

解决方案

我通过在加载工作代码的页面上单独更新信息解决了这个问题：

import React, { Component } from 'react'
import store from '../redux/store'

console.log("inside last file",store.getState())
const refreshInf = () => {
    let formats = store.getState().format
    console.log(formats)
    return formats
}

class ZakazPortretaSecond extends Component {
    render() {
        return (
            <div onLoad = {refreshInf()}>
                <h2 className='textSecond text-center'>Вы выбрали:A{refreshInf()}</h2> 
            </div>
        )
    }
}

export default ZakazPortretaSecond

div上的refreshInf函数已经刷新store中的信息了！

推荐阅读