拦截组件中的页面刷新

时间:2018-12-03 18:18:02

标签: javascript reactjs

我有一个组件:

class Results extends Component {

    constructor(props) {
        super(props);

        if (window.performance && window.performance.navigation.type === 1) {
            this.props.history.push('/login');
        }
    }

    state = {
        surname: false,
        name: false,
        patronymic: false,
        correctAnswers: false,
        allQuestions: false,
        results: []
    };

    componentDidMount() {
        getResults().then(this.resolveResults, this.rejectResults)
    }

    resolveResults = (response) => {
        this.setState({surname: response.user.surname});
        this.setState({name: response.user.name});
        this.setState({patronymic: response.user.patronymic});
        this.setState({correctAnswers: response.correctAnswers});
        this.setState({allQuestions: response.results.length});
        this.setState({results: response.results});
    };

    rejectResults = () => {
        this.props.history.push('/login');
    };

    logout = () => {
        this.props.history.push('/login');
    };

    topics = () => {
        this.props.history.push('/topics');
    };

    render() {
        const results = this.renderResults();
        return (
            <div className="global_result">
                <div className="results">
                    <div className="result_tasks">
                        {results}
                    </div>
                    <div className="result">
                        <div className="result_user_name">
                            <h2>{this.state.surname} {this.state.name} {this.state.patronymic}</h2></div>
                        <div className="result_correct_answer"><h2>Correct
                            answers: {this.state.correctAnswers} of {this.state.allQuestions}</h2></div>
                    </div>
                    <div className="task_two_button">
                        <input onClick={this.logout} type="button" className="come_back" value="Come back to login"/>
                        <input onClick={this.topics} type="button" className="come_back" value="Come back to topics"/>
                    </div>
                </div>
            </div>
        );
    }

    renderResults = () => {
        const resultsArray = this.state.results;
        return resultsArray.length !== 0
            ? resultsArray.map((element, index) => <Result key={'result' + index} numberTask={index + 1} task={element.task} solution={element.solution} actualAnswer={element.actualAnswer} />)
            : ('');
    };

}

export default withRouter(Results);

在构造函数中,我进行了刷新页面的检查……有两个问题:

1)推送后,该组件仍然调用componentDidMount,如何避免呢?

2)更新页面时,它确实会导致登录失败,但是在包含结果的页面之后,由于条件始终为真,我无法再输入该页面,怎么解决呢?

0 个答案:

没有答案