Я хочу обновить свой компонент Test.js на основе изменения localStorage - PullRequest
Новая
       31

Я хочу обновить свой компонент Test.js на основе изменения localStorage

0 голосов
/ 19 декабря 2018

Не запускается первым, если условие. Таким образом, после загрузки компонента отображается «Статистика, связанная с успеваемостью ученика», а когда однажды установлена ​​ссылка на тему (в каком-то другом компоненте , который удаляется слишком корректно ), отображается второй экран. До сих пор все работало нормально но когда ссылка на тему удаляется, если не удается запустить сначала, если условие и покажет второе отображение.По сути, я хочу изменить свой компонентный вид, основываясь на том, есть ли ссылка на тему. 

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

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Здесь я установил локальное хранилище.На каждом onTopicClick я получаю желаемый результат (имеется в виду второе, если выполняется оператор и обновляется компонент)Только когда localStorage удален, он остается на втором операторе if, что не соответствует действительности (он должен выполняться первым оператором if).У меня есть две функции (в отдельных компонентах), как onSectionClick и onTopicClick, как это: 

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')
        }
    }
0 голосов
/ 19 декабря 2018

Одна из самых сложных тем в передаче данных, вероятно.

let topicLink = localStorage.getItem('topic-link'); Эта строка является денежной линией.По сути, вы уже определили драйвер этого компонента, например, topicLink.

Далее нужно убедиться, что этот компонент использует эту переменную в качестве входных данных.Я заметил, что вы уже используете redux, поэтому эта переменная может быть частью переменных состояния.

  • Следующим шагом будет посмотреть, сможет ли ваше хранилище обновить эту переменную из localStorage.Это, вероятно, другая тема, например, проверять localStorage каждые 5 секунд, а затем обновлять переменную хранилища.

  • Однако не очень хорошая идея синхронизировать компоненты через переменную localStorage,Вместо этого вы должны загрузить свой код и сначала сохранить эту переменную localStorage в качестве переменной состояния, а затем сохранить ее в своем редуксе.

Так что в любом случае, ввод проп - это первый шаг, который также поможет вам протестировать код.

...