Chcę zaktualizować komponent Test.js na podstawie zmian localStorage

głosy
0

Nie uruchamia pierwszy jeśli stanie.
Więc raz składnikiem jest załadowany to pokazuje „Progress Student związane Stats”, a gdy raz temat-link jest ustawiony (w jakiś inny składnik , który jest usuwany zbyt poprawnie ) pokazuje drugi wyświetlacz. Wszystko działa dobrze aż do teraz , ale kiedy temat-link zostanie usunięty, jeśli nie powiedzie się uruchomić pierwsze jeśli warunek i pokazuje drugi wyświetlacz nadal. Zasadniczo chcę zmienić mój pogląd na temat komponentów oparty-link jest tam, czy nie.

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

Utwórz 19/12/2018 o 14:19
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

Tu, gdzie ustawić localStorage. Na każdym onTopicClick uzyskać pożądany wynik (czyli drugi jeśli biegnie oświadczenie i aktualizuje składnik). Dopiero gdy localStorage jest usuwany pozostaje na drugim if nie być przypadek (powinien działać pierwszy if). Mam dwa fucntions (w oddzielne komponenty) jak onSectionClick i onTopicClick tak:

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

Odpowiedział 19/12/2018 o 19:01
źródło użytkownik

głosy
-1

Jedną z najtrudniejszych tematów w komunikacji danych prawdopodobnie.

let topicLink = localStorage.getItem('topic-link');Ta linia to linia pieniądze. Zasadniczo, można już zidentyfikować kierowcę tego składnika, np topicLink.

Następną rzeczą jest, aby upewnić się, że za pomocą narzędzia Component tę zmienną jako wejście prop. Zauważyłem używasz Redux już zatem zmienna ta może być częścią zmiennych tamtejszych państwowych.

  • Następnym krokiem będzie sprawdzić, czy sklep może zaktualizować tę zmienną z localStorage. To prawdopodobnie jest inny temat, na przykład sprawdzać localStorage co 5 sekund, a następnie zaktualizować zmienną sklepu.

  • Jednakże, nie jest to dobry pomysł, aby zsynchronizować elementy za pomocą zmiennej localStorage, zamiast tego należy bootstrap swój kod i zapisać tę zmienną localStorage jako stan zmienny pierwszy i przechowywać w swojej Redux na przykład.

Tak czy inaczej, prop wejście jest pierwszym krokiem do zrobienia, to pomoże Ci przetestować kod, jak również.

Odpowiedział 19/12/2018 o 14:33
źródło użytkownik

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