javascript - 与 Axios react : Questionn with its choices in the same page

Question

我正在使用 React 进行测验。我想在同一页面中显示每个问题及其选择。单击按钮后，我想转到另一个页面，其中有第二个问题及其选择。它会引发错误

const {this.props.question, this.props.choice} = questions[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

Answer 1

我想也许你不知道reactJs中的'this.props'是什么，也许你需要将代码更改为:

const { 问题，选择 } = 问题[当前问题索引];

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