Ich möchte meine test.js Komponente aktualisieren basierend auf local ändern

stimmen
0

Schlägt fehl, wenn erste Bedingung ausgeführt werden .
Also , wenn Komponente geladen wird es zeigt „Student Fortschritt Statistik im Zusammenhang“ und wenn einmal Thema-Link gesetzt ist (in einer anderen Komponente , die auch richtig entfernt wird ) es zeigt zweite Anzeige. Alles funktioniert gut , bis jetzt aber als Thema-Link entfernt wird , wenn die erste , wenn die Bedingung nicht ausgeführt werden kann und zeigt zweite Anzeige immer noch. Grundsätzlich möchte ich meine Komponentensicht ändern , basierend auf themen Link besteht oder nicht.

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

Veröffentlicht am 19/12/2018 um 14:19
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Hier, wo ich die localstorage. Auf jedem onTopicClick bekomme ich die gewünschte Ausgabe (dh zweite Anweisung ausgeführt, wenn und aktualisiert sie die Komponente). Erst wenn local entfernt wird es bleibt auf dem zweiten if-Anweisung, die nicht der Fall sein (es ersten if-Anweisung ausgeführt werden soll). Ich habe zwei fucntions (in getrennten Komponenten) wie onSectionClick und onTopicClick wie folgt aus:

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

Beantwortet am 19/12/2018 um 19:01
quelle vom benutzer

stimmen
-1

wahrscheinlich eines der schwierigsten Themen in der Datenkommunikation.

let topicLink = localStorage.getItem('topic-link');Diese Linie ist die Linie Geld. Grundsätzlich identifizierte Sie bereits die Treiber dieser Komponente, zum Beispiel topicLink.

Die nächste Sache ist sicher, dass diese Komponente verwendet diese Variable als Stütze Eingang zu machen. Ich habe bemerkt, Sie redux bereits verwenden, damit diese Variable dort Teil der Zustandsvariablen sein könnte.

  • Der nächste Schritt wird sein zu sehen, ob Ihr Geschäft diese Variable von localstorage aktualisieren können. Dies ist wahrscheinlich ein anderes Thema, zum Beispiel, überprüfen Sie die localstorage alle 5 Sekunden, und dann den Laden Variable aktualisieren.

  • Allerdings ist es nicht eine gute Idee, Komponenten über eine Variable synchronisieren local, stattdessen sollten Sie Ihren Code Bootstrap und diese Variable local als Zustandsgröße ersten und Speicher in Ihrer redux beispielsweise speichern.

So oder so, Eingang prop ist der erste Schritt zu gehen, wird es Ihnen helfen, den Code zu testen, wie gut.

Beantwortet am 19/12/2018 um 14:33
quelle vom benutzer

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