TypeError:无法读取未定义的属性“问题”

时间:2020-04-11 17:45:43

标签: javascript html reactjs 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的一部分,可在render下显示动态文本。

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

1 个答案:

答案 0 :(得分:0)

在您的 message.member.voice.channel.join() .then(connection => { const dispatcher = connection.play(require("path").join(__dirname, './audio.mp3')); 函数中,请勿使用displayQuestions(questions=questions,..)。使用其他变量名,例如questions