Quiero actualizar mi Test.js componente basado en el cambio localStorage

votos
0

No se ejecuta si la condición primera.
Así que una vez que se carga el componente se muestra relacionado con el progreso del estudiante Estadísticas y una vez que se establece el tema de vínculos (en algún otro componente que se retira demasiado correctamente ) que muestra la segunda pantalla. Todo funciona bien hasta ahora , pero cuando el tema de vínculos se elimina si no se ejecuta si la condición primera y la segunda muestra pantalla sigue. Básicamente quiero cambiar mi punto de vista componente basado en el tema-link es allí o no.

import React, { Component } from react;
import {connect} from 'react-redux';

import {getQuestionsList} from '../../store/actions/questionActions';

class Test extends Component {

    render(){            
        let display;
        let topicLink = localStorage.getItem('topic-link');

        if(!topicLink){
            display = 
                <div style={{textAlign:'center',
                            fontSize:'22px'}}>
                    <p>Student Progress related Stats</p>
                </div>
        }
        else if(topicLink){
            display = 
                this.props.questions.map(question => (
                    <div key={question.id} style={{border:'1px solid #000',marginBottom:'15px'}}>
                        <div dangerouslySetInnerHTML={{__html: question.direction}} />
                        <div dangerouslySetInnerHTML={{__html: question.question}} />
                        <div>
                            <form>
                                <input type=radio name=option value=(A)/>{question.option_a}<br/>
                                <input type=radio name=option value=(B)/>{question.option_b}<br/>
                                <input type=radio name=option value=(C)/>{question.option_c}<br/>
                                <input type=radio name=option value=(D)/>{question.option_d}
                            </form>
                        </div>
                    </div>
                ))
        }
            
        return (
            <div>
                {display}
            </div>
        );
    }
};

const mapStateToProps = state => {
    return {
        questions: state.questions.items,
    }
}


export default connect(mapStateToProps, {getQuestionsList})(Test);

Publicado el 19/12/2018 a las 14:19
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

Aquí donde me puse el almacenamiento local. En cada onTopicClick consigo la salida deseada (es decir, la segunda sentencia if y se actualiza el componente). Sólo cuando se retira localStorage se mantiene en la segunda sentencia if que no sea el caso (que debe ejecutar en primer lugar si la declaración). Tengo dos fucntions (en componentes separados) como onSectionClick y onTopicClick como esto:

onTopicClick = () => {

        this.props.getQuestionsList(this.props.topicId);

        let topicName = this.props.name;
        topicName = topicName.replace(/\s+/g, '-').toLowerCase();
        let topicLink = "/updates/daily-practice-questions/" + this.props.sectionName + "/" + topicName;
        this.props.history.push(topicLink);
        localStorage.setItem('topic-link', topicLink);
    }
    
onSectionClick = () => {
        this.setState(prevState => ({
            isOpened: !prevState.isOpened
        }));
        let sectionName = this.props.name;
        sectionName = sectionName.replace(/\s+/g, '-').toLowerCase();
        this.setState({sectionName: sectionName});
        this.props.history.push("/updates/daily-practice-questions/" + sectionName);
        if(this.state.isOpened){
            this.props.history.push("/updates/daily-practice-questions");
            localStorage.removeItem('topic-link')
        }
    }

Respondida el 19/12/2018 a las 19:01
fuente por usuario

votos
-1

Uno de los temas más difíciles en la comunicación de datos, probablemente.

let topicLink = localStorage.getItem('topic-link');Esta línea es la línea de dinero. Básicamente, que ya ha identificado el conductor de este componente, por ejemplo, topicLink.

El siguiente paso es asegurarse de que este uso de componentes de esta variable como entrada de puntal. Me di cuenta de que está utilizando ya redux, por lo tanto, esta variable podría ser parte de las variables de estado allí.

  • El siguiente paso será ver si su tienda puede actualizar esta variable a partir de localStorage. Esto probablemente es otro tema, por ejemplo, comprobar el localStorage cada 5 segundos, y luego actualizar la variable de tienda.

  • Sin embargo, no es una buena idea para sincronizar los componentes a través de una variable localStorage, en cambio, debe arrancar su código y guardar esta variable localStorage como una variable de estado y la primera tienda en su redux por ejemplo.

Así que de cualquier manera, prop de entrada es el primer paso para ir, él le ayudará a probar el código.

Respondida el 19/12/2018 a las 14:33
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more