Antworten einer Quizfrage aus der Json Datenbank mappen

N

nikva

Bekanntes Mitglied
Hallo,
Ich versuche aktuell Fragen aus einer Json Datenbank in ein Quiz zu laden und die Antworten der Frage in der Frage in Buttons zu laden.
Wenn ich aber versuche die Antworten abzurufen, kommt der Fehler: ( Line 87:10: 'question' is not defined no-undef)
Wäre dankbar für einen Tipp wo mein Fehler liegt.

Javascript:
import './play_quiz.css';
import React from "react"

class Play_quiz extends React.Component {

    state = {
        currentQuestion: 0,
        showScore: false,
        score: 0,
        questions: []
    }

    componentDidMount() {
        this.getRandomizedQuestions();
        console.log("Current state:")
    }

    getRandomizedQuestions = () => {
        const apiUrl = 'http://localhost:3001/questions'
        fetch(apiUrl)
            .then((response) => response.json())
            .then(
                (result) => {
                    console.log("From database:");
                    console.log(result);

                    let amountOfQuestions = result.length;
                    let randomizedResult = [];
                    for (let i = 0; i < amountOfQuestions; i++) {
                       let randomIndex = Math.floor(Math.random() * result.length);
                       randomizedResult.push(result[randomIndex]);
                       result.splice(randomIndex, 1);
                    }
                    //const randomizedResult  = result.sort(() => Math.random() - 0.5)
                    this.setState({questions: randomizedResult });
                },
                (error) => {
                    console.log('An unexpected error occurred', error);
                }
            );
    };


    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({ score: this.state.score + 1 });
        }

        const nextQuestion = this.state.currentQuestion + 1;
        if (nextQuestion < this.state.questions.length) {
            this.setState({
                currentQuestion: nextQuestion
            })
        } else {
            this.setState({
                showScore: true
            })
        }
    };

    updateCurrentQuestion = () => {
        this.setState({ currentQuestion: this.state.currentQuestion + 1 })

    }

    render() {
        return (
            <div className='quiz-window'>
                {this.state.questions.map((question, index) => (
                    <div key={index}>
                        {question.title}
                    </div>)
                )}
                {this.state.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                        <div>
                            <div className='question-section'>
                                <div className='question-count'>
                                    <span>Frage {this.updateCurrentQuestion}</span>/{this.state.questions.length}
                                </div>
                            </div>

                            <div className='answer-section'>
                                {question.answers.map(answer => (
                                                  <button key={answer.number} onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                                                  {answer.answer}
                                                  </button>
                                    ))}
                            </div>
                        </div>
                    )
                }
            </div>
        )
    }
}
export default Play_quiz;
Javascript:
{
  "questions": [
    {
      "id": 0,
      "title": "Pi Dezimal",
      "author": "Timo",
      "isMC": false,
      "question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
      "answers": "1415",
      "category": null
    },
    {
      "id": 1,
      "title": "Längster Fluss",
      "author": "Timo",
      "isMC": true,
      "question": "Welcher ist der längte Fluss der Welt?",
      "answers": [
        {
          "number": 1,
          "answer": "Donau",
          "isCorrect": false
        },
        {
          "number": 2,
          "answer": "Nil",
          "isCorrect": true
        },
        {
          "number": 3,
          "answer": "Wolga",
          "isCorrect": false
        },
        {
          "number": 4,
          "answer": "Amazonas",
          "isCorrect": false
        }
      ],
      "category": null
    },
    {
      "id": 2,
      "title": "Energieaufnahme Pflanzen",
      "author": "Timo",
      "isMC": false,
      "question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
      "answers": "Photosynthese",
      "category": null
    }
  ],


  "quizzes": [
    {
      "id": 0,
      "player": "Emil",
      "questions" : [
        {
          "number" : 0,
          "referenceID" : 1,
          "isAnswered" : false,
          "isCorrectlyAnswered" : false
        },
        {
          "number" : 1,
          "referenceID" : 0,
          "isAnswered" : false,
          "isCorrectlyAnswered" : false
        }
      ],
      "grade" : null,
      "editingTime" : null,
      "isFinished" : false
    }
  ],


  "profile": {
    "name": "typicode"
  }
}
 
N

nikva

Bekanntes Mitglied
Ich hab es jetzt ne weile versucht aber, ich komme nicht zur Lösung. Die Fragen werden zwar geladen(was ich durch logs sehen kann), aber ich kann auf Teufel komm raus nicht die Antwortmöglichkeiten hinzufügen. Wäre dankbar wenn mich jemand hier nen Schritt weiter bringen könnte.
 
mihe7

mihe7

Top Contributor
Man weiß ja nicht, was Du genau haben willst :) Es könnte auch sein, dass Du z. B. über this.state.questions in Verbindung mit this.state.currentQuestion gehen kannst.
 
N

nikva

Bekanntes Mitglied
Ich habs folgendermaßen probiert, aber habe immer noch das selbe Problem(TypeError: this.state.questions[this.state.currentQuestion] is undefined). Was ich will, ist dass ich die Fragen zufällig aus der Datenbank wähle( was auch mit getrandomizedquestions funktioniert). Nun will ich diese Fragen im Quiz darstellen mit den onclick buttons und nach jedem button festhalten ob die antwort richtig war und das im score speichern( was auch mit testfragen ohne datenbank super geklappt hat). Nun kriege ich beim Versuch die Fragen zu mappen aber immer reference error

Javascript:
import './play_quiz.css';
import React from "react"

class Play_quiz extends React.Component {

    state = {
        currentQuestion: 0,
        showScore: false,
        score: 0,
        questions: []
    }

    componentDidMount() {
        this.getRandomizedQuestions();
        console.log("Current state:")
    }

    getRandomizedQuestions = () => {
        const apiUrl = 'http://localhost:3001/questions'
        fetch(apiUrl)
            .then((response) => response.json())
            .then(
                (result) => {
                    console.log("From database:");
                    console.log(result);

                    let amountOfQuestions = result.length;
                    let randomizedResult = [];
                    for (let i = 0; i < amountOfQuestions; i++) {
                       let randomIndex = Math.floor(Math.random() * result.length);
                       randomizedResult.push(result[randomIndex]);
                       result.splice(randomIndex, 1);
                    }
                    //const randomizedResult  = result.sort(() => Math.random() - 0.5)
                    this.setState({questions: randomizedResult });
                },
                (error) => {
                    console.log('An unexpected error occurred', error);
                }
            );
    };


    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({ score: this.state.score + 1 });
        }

        const nextQuestion = this.state.currentQuestion + 1;
        if (nextQuestion < this.state.questions.length) {
            this.setState({
                currentQuestion: nextQuestion
            })
        } else {
            this.setState({
                showScore: true
            })
        }
    };

    updateCurrentQuestion = () => {
        this.setState({ currentQuestion: this.state.currentQuestion + 1 })

    }
    
    render() {
        return(
            <div className='quiz-window'>
                {this.state.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                    <>
                        <div className='question-section'>
                            <div className='question-count'>
                                <span>Frage {this.state.currentQuestion + 1}</span>/{this.state.questions.length}
                            </div>
                            <div className='question-text'>{this.state.questions[this.state.currentQuestion].questionText}</div>
                        </div>
                        <div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.answers}</button>
                            ))}
                        </div>
                    </>
                )
                }
            </div>
        )
                }
}
export default Play_quiz;

Java:
{
  "questions": [
    {
      "id": 0,
      "title": "Pi Dezimal",
      "author": "Timo",
      "isMC": false,
      "question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
      "answers": "1415",
      "category": null
    },
    {
      "id": 1,
      "title": "Längster Fluss",
      "author": "Timo",
      "isMC": true,
      "question": "Welcher ist der längte Fluss der Welt?",
      "answers": [
        {
          "number": 1,
          "answer": "Donau",
          "isCorrect": false
        },
        {
          "number": 2,
          "answer": "Nil",
          "isCorrect": true
        },
        {
          "number": 3,
          "answer": "Wolga",
          "isCorrect": false
        },
        {
          "number": 4,
          "answer": "Amazonas",
          "isCorrect": false
        }
      ],
      "category": null
    },
    {
      "id": 2,
      "title": "Energieaufnahme Pflanzen",
      "author": "Timo",
      "isMC": false,
      "question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
      "answers": "Photosynthese",
      "category": null
    }
  ],
  "quizzes": [
    {
      "id": 0,
      "player": "Emil",
      "questions": [
        {
          "number": 0,
          "referenceID": 1,
          "isAnswered": false,
          "isCorrectlyAnswered": false
        },
        {
          "number": 1,
          "referenceID": 0,
          "isAnswered": false,
          "isCorrectlyAnswered": false
        }
      ],
      "grade": null,
      "editingTime": null,
      "isFinished": false
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
 
N

nikva

Bekanntes Mitglied
Man weiß ja nicht, was Du genau haben willst
vll gehe ich mal schritt für schritt durch wie ich mir das gedacht habe und ihr weißt mich auf meinen Denkfehler hin:
Zuerst lade ich in "getRandomizedQuestion" ein array aus der Datenbank, dass die Beispielfragen beinhaltet und mappe das auf das questions [ ] array im state.

In der Render Methode wird dann false showscore auf "false" steht (default wert) die Nummer der Frage
Javascript:
{this.state.currentQuestion + 1}

und die Anzahl der Gesamtfragen angezeigt
Javascript:
{this.state.questions.length}

anschließend wird dann "title" = fragetext der question auf array position 0 geholt mit:
Javascript:
{this.state.questions[this.state.currentQuestion].title

und zuletzt dann die Antwortmöglichkeiten dieser Frage mit folgenden zeilen auf onclickbuttons gemappt
wo jedoch der Fehler TypeError: this.state.questions[this.state.currentQuestion] is undefined auftritt
was ja darauf hindeutet, dass die Antwortmöglichkeiten nicht mit aus der Datenbank gezogen werden aus welchen Grund auch immer...

Javascript:
                        <div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.title}</button>
mit folgender methode zähle ich dann den score
Javascript:
    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({ score: this.state.score + 1 });
        }
        const nextQuestion = this.state.currentQuestion + 1;
        if (nextQuestion < this.state.questions.length) {
            this.setState({
                currentQuestion: nextQuestion
            })
        } else {
            this.setState({
                showScore: true
            })
        }
    };




Javascript:
import './play_quiz.css';
import React from "react"

class Play_quiz extends React.Component {

    state = {
        currentQuestion: 0,
        showScore: false,
        score: 0,
        questions: []
    }

    componentDidMount() {
        this.getRandomizedQuestions();
        console.log("Current state:")
    }

    getRandomizedQuestions = () => {
        const apiUrl = 'http://localhost:3001/questions'
        fetch(apiUrl)
            .then((response) => response.json())
            .then(
                (result) => {
                    console.log("From database:");
                    console.log(result);

                    let amountOfQuestions = result.length;
                    let randomizedResult = [];
                    for (let i = 0; i < amountOfQuestions; i++) {
                       let randomIndex = Math.floor(Math.random() * result.length);
                       randomizedResult.push(result[randomIndex]);
                       result.splice(randomIndex, 1);
                    }
                    //const randomizedResult  = result.sort(() => Math.random() - 0.5)
                    this.setState({questions: randomizedResult });
                },
                (error) => {
                    console.log('An unexpected error occurred', error);
                }
            );
    };


    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({ score: this.state.score + 1 });
        }

        const nextQuestion = this.state.currentQuestion + 1;
        if (nextQuestion < this.state.questions.length) {
            this.setState({
                currentQuestion: nextQuestion
            })
        } else {
            this.setState({
                showScore: true
            })
        }
    };

    updateCurrentQuestion = () => {
        this.setState({ currentQuestion: this.state.currentQuestion + 1 })

    }
  
    render() {
        return(
            <div className='quiz-window'>
                {this.state.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                    <>
                        <div className='question-section'>
                            <div className='question-count'>
                                <span>Frage {this.state.currentQuestion + 1}</span>/{this.state.questions.length}
                            </div>
                            <div className='question-text'>{this.state.questions[this.state.currentQuestion].title}</div>
                        </div>
                        <div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.title}</button>
                            ))}
                        </div>
                    </>
                )
                }
            </div>
        )
                }
}
export default Play_quiz;


Javascript:
{
  "questions": [
    {
      "id": 0,
      "title": "Pi Dezimal",
      "author": "Timo",
      "isMC": false,
      "question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
      "answers": "1415",
      "category": null
    },
    {
      "id": 1,
      "title": "Längster Fluss",
      "author": "Timo",
      "isMC": true,
      "question": "Welcher ist der längte Fluss der Welt?",
      "answers": [
        {
          "number": 1,
          "answer": "Donau",
          "isCorrect": false
        },
        {
          "number": 2,
          "answer": "Nil",
          "isCorrect": true
        },
        {
          "number": 3,
          "answer": "Wolga",
          "isCorrect": false
        },
        {
          "number": 4,
          "answer": "Amazonas",
          "isCorrect": false
        }
      ],
      "category": null
    },
    {
      "id": 2,
      "title": "Energieaufnahme Pflanzen",
      "author": "Timo",
      "isMC": false,
      "question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
      "answers": "Photosynthese",
      "category": null
    }
  ],
  "quizzes": [
    {
      "id": 0,
      "player": "Emil",
      "questions": [
        {
          "number": 0,
          "referenceID": 1,
          "isAnswered": false,
          "isCorrectlyAnswered": false
        },
        {
          "number": 1,
          "referenceID": 0,
          "isAnswered": false,
          "isCorrectlyAnswered": false
        }
      ],
      "grade": null,
      "editingTime": null,
      "isFinished": false
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
 
Zuletzt bearbeitet:
mihe7

mihe7

Top Contributor
TypeError: this.state.questions[this.state.currentQuestion] is undefined auftritt
Was darauf hindeutet, dass this.state.questions leer ist. Den Fall müsstest Du vorab abfangen.

Geh mal per Einzelschritt durch bzw. lass Dir mehr auf der Konsole ausgeben, damit Du nachvollziehen kannst, wo das Problem liegt.
 
N

nikva

Bekanntes Mitglied
ich habe den zustand des arrays im log anzeigen lassen und es scheint tatsächlich innerhalb der render leer zu sein(artraylänge 0). Ich habe dann ein Problem gefunden, bei dem Arrays manchmal schneller Rendern als sie befüllt werden und hab mal durch folgende wartefunktion getestet ob es bei mir der fall ist. Damit funktioniert es jetzt nach mehrmaligem aktualisieren zumindest für eine Frage bis dann der selbe Fehler auftaucht. Wenn ich die nicht multiple choice Fragen rausnehme, funktioniert es auch, aber ohne dass man den Inhalt der Felder sieht(man kann sie aber blind anklicken und das Quiz "läuft". Ich müsste also eine Art check vor jeder Frage durchführen ob die Frage multiple choice(ein array) ist und sie nur dann rendern. Ansonsten müsste ich einen anderen Weg finden die Frage darzustellen.

Javascript:
    render() {
        return (
          <div className="quiz-window">
            {this.state.showScore ? (
              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">
                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>
                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].title}
                  </div>
                </div>
                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button
                        onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}
                      >
                        {answer.title}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>Loading</p>
            )}
          </div>
        );
      }
 
N

nikva

Bekanntes Mitglied
Wenn ich aber den Zustand von showscore auf "true" setze, zeigt er auch die richtige länge des Arrays an(in diesem Fall 3), der Zustand des Arrays im Log innerhalb der Render ist aber trotzdem 0, wenn man jedoch wartet so wie in meiner methode nicht.
Ersetz doch einfach mal den Code, der die Daten abruft, durch was statisches.
was genau meinst du damit?
 
mihe7

mihe7

Top Contributor
Ich meine, dass Du
Javascript:
    getRandomizedQuestions = () => {
        const apiUrl = 'http://localhost:3001/questions'
        fetch(apiUrl)
            .then((response) => response.json())
            .then(
                (result) => {
                    console.log("From database:");
                    console.log(result);

                    let amountOfQuestions = result.length;
                    let randomizedResult = [];
                    for (let i = 0; i < amountOfQuestions; i++) {
                       let randomIndex = Math.floor(Math.random() * result.length);
                       randomizedResult.push(result[randomIndex]);
                       result.splice(randomIndex, 1);
                    }
                    //const randomizedResult  = result.sort(() => Math.random() - 0.5)
                    this.setState({questions: randomizedResult });
                },
                (error) => {
                    console.log('An unexpected error occurred', error);
                }
            );
    };
einfach mal z. B. durch
Javascript:
    getRandomizedQuestions = () => {
        const result = [
    {
      "id": 0,
      "title": "Pi Dezimal",
      "author": "Timo",
      "isMC": false,
      "question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
      "answers": "1415",
      "category": null
    },
    {
      "id": 1,
      "title": "Längster Fluss",
      "author": "Timo",
      "isMC": true,
      "question": "Welcher ist der längte Fluss der Welt?",
      "answers": [
        {
          "number": 1,
          "answer": "Donau",
          "isCorrect": false
        },
        {
          "number": 2,
          "answer": "Nil",
          "isCorrect": true
        },
        {
          "number": 3,
          "answer": "Wolga",
          "isCorrect": false
        },
        {
          "number": 4,
          "answer": "Amazonas",
          "isCorrect": false
        }
      ],
      "category": null
    },
    {
      "id": 2,
      "title": "Energieaufnahme Pflanzen",
      "author": "Timo",
      "isMC": false,
      "question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
      "answers": "Photosynthese",
      "category": null
    }
        ];
        let amountOfQuestions = result.length;
        let randomizedResult = [];
        for (let i = 0; i < amountOfQuestions; i++) {
            let randomIndex = Math.floor(Math.random() * result.length);
            randomizedResult.push(result[randomIndex]);
            result.splice(randomIndex, 1);
        }
        //const randomizedResult  = result.sort(() => Math.random() - 0.5)
        this.setState({questions: randomizedResult });
    };
ersetzen sollst.
 
N

nikva

Bekanntes Mitglied
Das habe ich schon probiert und es klappt auch. Das Problem ist, dass die Render() Methode im Lyfe cycle vor der componentDidMount() Methode liegt und somit Versucht ein Array zu verwenden, dass noch leer ist.
siehe hier
Ich habe versucht dies durch
Javascript:
this.state.questions.length > 0 ?
zu fixen, was jetzt nach mehrmaligen aktualisieren mal klappt und mal nicht. Es scheint als würden Render und componentDidMount() jetzt ein Rennen abliefern und je nachdem wer schneller ist, erhalte ich entweder ein undefined Array oder zumindest die erste Frage wird gerendert.

Dies Versuche ich grade durch eine weitere Bedingung am start zu beheben, in der ich überprüfe ob das Array überhaupt existiert bevor die Render Methode ausgeführt wird. Hierbei setze ich aber wohl die Klammern iwo Falsch, denn ich erzeuge "unreachable code"
Javascript:
    render() {
        return (
            if (Array.isArray(this.state.questions) && this.state.questions.length) {
          <div className="quiz-window">
            {this.state.showScore ? (

              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">

                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>

                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].question}
                  </div>
                </div>

                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                        {answer.question}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>lädt...</p>
            )}
          </div>
      
            }
            else {
                <p>lädt...</p>
            }
        );
      }
 
mrBrown

mrBrown

Super-Moderator
Mitarbeiter
Das if darf so nicht in dem return stehen. Entweder ternären Operator nutzen, oder das return innerhalb des if- bzw. else-Blocks.

Und genereller Tipp: Functional Components machen oftmals einiges deutlich einfacher, solltest du dir mal angucken, möglicherweise sind dir für dich jetzt schon interessant :)
 
N

nikva

Bekanntes Mitglied
das return innerhalb des if- bzw. else-Blocks.
hab ich gemacht. Das Problem ist jetzt, dass die Methode wie ich es wollte nicht mehr versucht ein leeres Array abzurufen, jedoch funktioniert jetzt das mapping nicht bzw ich sehe jetzt erst, dass es die ganze zeit nicht funktioniert hat, mit der Fehlermeldung

TypeError: this.state.questions[this.state.currentQuestion].answers.map is not a function

Die Buttons haben aber vorher schon funktioniert. Zwar waren die Felder leer, jedoch konnte man sie anklicken und hat auch damit die handleAnswerOnClick ausgelöst und den score gezählt.
Jetzt aber scheint der Typ von "answers" nicht mehr mit der map Methode kombatibel zu sein?

Javascript:
    render() {
        if (Array.isArray(this.state.questions) && this.state.questions.length) {
        return (
          <div className="quiz-window">
            {this.state.showScore ? (

              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">

                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>

                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].question}
                  </div>
                </div>

                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                        {answer.question}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>lädt...</p>
            )}
          </div>
        );
    }
    else {
        return (
        <p>lädt...</p>
        )
    }
      }
 
N

nikva

Bekanntes Mitglied
Ich habe jetzt um zu testen, ob zumindest die MC Fragen funktionieren alle nicht MC Fragen aus der Datenbank genommen. Jetzt rendert zwar die Frage immer, aber es wird zum einen die anzahl der Fragen die anhand der Arraylänge bestimmt wird
Javascript:
                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>
immer eins zu hoch angezeigt und außerdem kriege ich nach dem anklicken der ersten Frage wieder den Fehler, dass das Array undefined ist, was wahrscheinlich beides aus dem selben Grund passiert: Es wird zusätzlich zu der MC Frage noch ein weiteres leeres Array geladen aus irgendeinem Grund.
 
mihe7

mihe7

Top Contributor
Lass Dir einfach mal this.state.questions auf der Konsole ausgeben, dann wirst Du den Grund schon sehen.
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
pkm Problem mit Reaktivität bei einer Vue in Vue.js Angular, React, JQuery - Fragen zu JavaScript 0
X Mehrfaches Nutzen einer Funktion Angular, React, JQuery - Fragen zu JavaScript 1
H Bilder auf einer Webseite anzeigen Angular, React, JQuery - Fragen zu JavaScript 4
Anfänger2011 Ergebnis einer Funktion direkt in Variable speichern Angular, React, JQuery - Fragen zu JavaScript 6
E Aufbau einer URL Angular, React, JQuery - Fragen zu JavaScript 2
P Lauftext als Java Script Mehrmals auf einer Seite abspielen funktioniert nicht Angular, React, JQuery - Fragen zu JavaScript 3
A Facebool und Twitter an einer Stelle Angular, React, JQuery - Fragen zu JavaScript 1
P mehrere Funktionen in einer aufrufen und onklick zuweisen Angular, React, JQuery - Fragen zu JavaScript 14
K dynamischer Headbereich einer Webseite Angular, React, JQuery - Fragen zu JavaScript 3
S Problem mit Aufruf einer *.js-Datei Angular, React, JQuery - Fragen zu JavaScript 2
G hintergrundbild einer webseite per uhrzeit zu verändern Angular, React, JQuery - Fragen zu JavaScript 4
J Mehrere Alertboxen auf einer seite möglich ? Angular, React, JQuery - Fragen zu JavaScript 2
G Wer kann mir Helfen, bei einer automatischen Diashow? Angular, React, JQuery - Fragen zu JavaScript 2
R onload Aufruf einer Funktion in einer Funktion Angular, React, JQuery - Fragen zu JavaScript 2
S HTML Cod in einer bestimmten stelle einfügen. Angular, React, JQuery - Fragen zu JavaScript 12
H Zelle einer Tabelle auslesen Angular, React, JQuery - Fragen zu JavaScript 2
G Status einer dynamischen erstellten "Checkbox[]" ä Angular, React, JQuery - Fragen zu JavaScript 3
C Flashfilm aus einer HTML-Seite im Fullscreen öffnen Angular, React, JQuery - Fragen zu JavaScript 2
S Verweise einer Auswahlliste in einem IFrame anzeigen Angular, React, JQuery - Fragen zu JavaScript 5
M Frage wegen einer einfachen Java Bildergalerie Angular, React, JQuery - Fragen zu JavaScript 8
G Erstellungsdatum/-zeit einer anderen Datei ausgeben Angular, React, JQuery - Fragen zu JavaScript 2
F Browser-/OS-Abfrage beim Laden einer Internetseite Angular, React, JQuery - Fragen zu JavaScript 3
M 2 PopUps auf einer .htm...Probleme Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Anzeige

Neue Themen


Oben