我有一个组件:
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)更新页面时,它确实会导致登录失败,但是在包含结果的页面之后,由于条件始终为真,我无法再输入该页面,怎么解决呢?