javascript - TypeError：无法读取未定义的属性“问题”

问题描述

我想显示从本地 .json 文件中获取的信息，并使用以下 Javascript 函数将信息呈现到我的 HTML 中。即使已经定义了 const 答案，控制台也会抛出错误。我将其注释掉只是为了看看函数的其余部分是否有效，并且我也得到了相同的 TypeError 问题。

下面是在 React 中，Questions.json 被导入到我的 Play.js 页面中：

import React, { Fragment } from 'react';
import { Helmet } from 'react-helmet';
import questions from '../../questions.json';
import isEmpty from '../../utils/is-empty';


class Play extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        questions,
        currentQuestion: {},
        nextQuestion: {},
        previousQuestion: {},
        answer:'',
        numberofQuestions: 0,
        numberOfAnsweredQuestion: 0,
        score: 0,
        correctAnswers: 0,
        wrongAnswers: 0,
        hints: 5,
        fiftyFifty: 2,
        usedFiftyFifty: false,
        time: {}
    };
}

componentDidMount () {
    const {questions, currentQuestion, nextQuestion,previousQuestion} = this.state;
    this.displayQuestions(questions,currentQuestion,nextQuestion,previousQuestion);
}

displayQuestions = (questions = this.state.questions, currentQuestion, nextQuestion, previousQuestion) => {
    let { currentQuestionIndex } = this.state;
    if (!isEmpty(this.state.questions)) {
        questions = this.state.questions;
        currentQuestion = questions[currentQuestionIndex]
        nextQuestion = questions[currentQuestionIndex + 1];
        previousQuestion = questions[currentQuestionIndex - 1];
        const answer = currentQuestion.answer;
        this.setState({
            currentQuestion,
            nextQuestion,
            previousQuestion,
            answer
        }); 

    }
};

这是在渲染下显示动态文本的 HTML 的一部分。

<h5>{currentQuestion.question}</h5>
                <div className="options-container">
                    <p className="option">{currentQuestion.optionA}</p>
                    <p className="option">{currentQuestion.optionB}</p>
                </div>
                <div className="options-container">
                    <p className="option">{currentQuestion.optionC}</p>
                    <p className="option">{currentQuestion.optionD}</p>
                </div>

标签： javascripthtmlreactjstypeerror

javascript - TypeError：无法读取未定义的属性“问题”

问题描述

解决方案

推荐阅读