我正在与React进行测验。我想在同一页面中显示每个问题及其选择。单击按钮后,我想转到另一个页面,这是第二个问题及其选择。它将引发错误
const {this.props.question,this.props.choice} =问题[currentQuestionIndex]
How can I fix it?
import React from "react"
import axios from "axios/index";
class QuizAppQuestion extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
currentQuestionIndex: 0,
questions: [],
answers: []
};
}
componentDidMount() {
axios
.get(
"https://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions"
)
.then(response => {
this.setState({questions: response.data});
});
}
onChangeOption(value) {
const {currentQuestionIndex} = this.state;
let answers = {...this.state.answers};
answers[currentQuestionIndex] = value;
this.setState({answers});
}
handleNext() {
let incrementCurrentQuestionIndex = this.state.currentQuestionIndex + 1;
this.setState({currentQuestionIndex: incrementCurrentQuestionIndex});
}
render() {
const {questions, currentQuestionIndex, answers} = this.state;
if (!questions.length) {
return <div>Loading questions...</div>
}
if (currentQuestionIndex >= questions.length) {
return (<div><h3>End of the quiz</h3></div>)
}
const {this.props.question, this.props.choice} = questions[currentQuestionIndex];
return (
<div className="Question">
<h1>Question {currentQuestionIndex + 1}</h1>
<h4> {this.props.question}</h4>
{this.props.choices.map((c, i) => (
<label>
<input type="radio" checked={answers[currentQuestionIndex] === c.choice}
onChange={(evt) => this.onChangeOption(evt.target.value)}>{c.choice}</input>
</label>
))}
<button disabled={currentQuestionIndex === questions.length - 1}
onClick={() => this.handleNext()}>Next
</button>
</div>
);
}
}
export default QuizAppQuestion
答案 0 :(得分:1)
我认为也许您不知道reactJs中的'this.props'是什么,也许您需要将代码更改为此:
const {问题,选择} =问题[currentQuestionIndex];
return (
<div className="Question">
<h1>Question {currentQuestionIndex + 1}</h1>
<h4> {question}</h4>
{choices.map((c, i) => (
<label>
<input type="radio" checked={answers[currentQuestionIndex] === c.choice}
onChange={(evt) => this.onChangeOption(evt.target.value)}>{c.choice}</input>
</label>
))}
<button disabled={currentQuestionIndex === questions.length - 1}
onClick={() => this.handleNext()}>Next
</button>
</div>
);