Je veux mettre à jour mon composant Test.js basé sur le changement localStorage

voix
0

Ne réussit pas à exécuter d' abord si la condition.
Donc , une fois le composant est chargé , il affiche « lié les progrès des élèves Stats » et une fois le sujet liaison est défini (dans un autre composant qui est retiré trop bien ) , il montre la deuxième affichage. Tout fonctionne bien jusqu'à maintenant , mais quand le sujet-lien est supprimé si ne parvient pas à exécuter d' abord si la condition et montre encore deuxième écran. Fondamentalement , je veux changer mon point de vue sur la composante thématique lien est là ou non.

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);

Créé 19/12/2018 à 14:19
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Ici où je mets le localStorage. Sur chaque onTopicClick je reçois la sortie désirée (ce qui signifie second si exécute des états et il met à jour le composant). Seulement quand localStorage est retiré, il reste sur la seconde instruction if qui ne soit pas le cas (il devrait fonctionner d'abord si la déclaration). J'ai deux fucntions (en composants séparés) comme onSectionClick et onTopicClick comme ceci:

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

Créé 19/12/2018 à 19:01
source utilisateur

voix
-1

L'un des sujets les plus difficiles en matière de communication de données sans doute.

let topicLink = localStorage.getItem('topic-link');Cette ligne est la ligne d'argent. En gros, vous avez déjà identifié le conducteur de ce composant, par exemple, topicLink.

La prochaine chose est de vous assurer que cette utilisation de cette composante variable en entrée prop. Je remarque que vous utilisez déjà redux, par conséquent, cette variable pourrait faire partie des variables d'état là-bas.

  • La prochaine étape sera de voir si votre magasin peut mettre à jour cette variable de localStorage. Ceci est probablement un autre sujet, par exemple, vérifier la localStorage toutes les 5 secondes, puis mettez à jour la variable magasin.

  • Cependant, ce n'est pas une bonne idée de synchroniser des composants via une variable localStorage, au lieu, vous devez amorcer votre code et enregistrer cette variable localStorage comme variable d'état et premier magasin dans votre Redux par exemple.

Donc, de toute façon, accessoire d'entrée est la première étape pour y aller, ça va vous aider à tester le code.

Créé 19/12/2018 à 14:33
source utilisateur

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