Quero atualizar meu componente test.js baseada na mudança localStorage

votos
0

Falha ao executar primeiro se condição.
Assim, uma vez componente é carregado mostra Student Progress relacionados Stats e quando uma vez tópico-link está definido (em algum outro componente que é removido muito corretamente ) mostra segundo monitor. Tudo funciona bem até agora , mas quando tópico-link é removido se não conseguir executar primeiro se a condição e mostra segundo monitor ainda. Basicamente eu quero mudar meu ponto de vista componente com base no tema-link está lá ou não.

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 19/12/2018 em 14:19
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

Aqui onde eu definir o localStorage. Em cada onTopicClick I obter o resultado desejado (ou seja, segundo se instrução é executada e atualiza o componente). Somente quando localStorage é removido ele permanece no segundo if que não seja o caso (ele deve ser executado primeiro if). Eu tenho dois fucntions (em componentes separados) como onSectionClick e onTopicClick assim:

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')
        }
    }

Respondeu 19/12/2018 em 19:01
fonte usuário

votos
-1

Um dos temas mais difíceis na comunicação de dados, provavelmente.

let topicLink = localStorage.getItem('topic-link');Esta linha é a linha de dinheiro. Basicamente, você já identificou o motorista deste componente, por exemplo, topicLink.

A próxima coisa é certificar-se este uso componente esta variável como uma entrada de prop. Notei que você está usando redux já, portanto, esta variável poderia ser parte das variáveis ​​de estado lá.

  • O próximo passo será ver se a sua loja pode atualizar esta variável de localStorage. Isso provavelmente é outro tópico, por exemplo, verificar o localStorage a cada 5 segundos, e então atualizar a variável loja.

  • No entanto, não é uma boa idéia para sincronizar componentes através de uma variável localStorage, em vez disso, você deve inicializar o seu código e salvar esta variável localStorage como um estado variável primeiro e armazenar em seu redux por exemplo.

Então, de qualquer maneira, prop entrada é o primeiro passo para ir, ele vai ajudar você a testar o código também.

Respondeu 19/12/2018 em 14:33
fonte usuário

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