0
142
VisualizaçõesEspere hasta que se obtengan los datos de MongoDB React JS
Estoy creando una aplicación de prueba. Este es el código de la página del cuestionario. El documento Quiz DB contiene una matriz QuizQuestions que tiene identificadores de preguntas. Luego busco una pregunta específica de MCQ/Question DB. Recuperar MCQ toma tiempo y cuando console.log busco datos. Los datos de primera y segunda vez están indefinidos y luego son visibles. Debido a esto, no puedo mostrarlo porque causa TypeError: Cannot read properties of undefined mcqOptions ¿Cómo puedo solucionar esto? 
`
import React, { useEffect, useState } from "react"; import shuffleMcq from "../components/shuffleMcq"; const QuizTakePage = ({ match }) => { const reqUrl = match.params.path; //Getting Quiz ID From URL const [quizInfo, setQuizInfo] = useState({ "q_title":"", "q_seo_description":"", "q_questions":[], "q_tags":[], "m_subject":"", }) //const fetchQuizData = fetch(); useEffect(() => { const fetchQuizData = async () => { const reqApiUrl = '/quiz/api/qid/'+reqUrl; const fetchedApiResult = await fetch(reqApiUrl); const resultJson = await fetchedApiResult.json(); setQuizInfo(resultJson); } fetchQuizData(); }, []); // Quiz Data START const quizTitle = quizInfo.q_title; const quizDesc = quizInfo.q_seo_description; const quizQuestions = quizInfo.q_questions; // Quiz Data END // MCQ Data START const [currentQuestion, setCurrentQuestion] = useState(0); const requestedQuestion = quizQuestions[currentQuestion]; const [mcqInfo, setMcqInfo] = useState({ "m_title":"", "m_question":"", "m_alternatives":[], "m_language":"", }) useEffect(() => { const fetchApiResponse = async () => { const reqApiUrl = '/mcq/api/mid/'+requestedQuestion; const fetchedApiResult = await fetch(reqApiUrl); const resultJson = await fetchedApiResult.json(); setMcqInfo(resultJson); } fetchApiResponse(); }, [requestedQuestion]); //const mcqLanguage = mcqInfo.m_language; const mcqQuestion = mcqInfo.m_question; const mcqOptions = mcqInfo.m_alternatives; console.log(mcqOptions); return ( <> <h1>{quizTitle}</h1> <p>{quizDesc}</p> </> ); }; export default QuizTakePage;1 Respostas
Responde à pergunta0
La razón por la que no está undefined por primera y segunda vez se debe al hecho de que useEffect no se habría ejecutado para entonces. useEffect se ejecuta cuando el componente se procesa y monta por primera vez, y luego se realizan ejecuciones posteriores cuando hay un cambio en la matriz de dependencia (si hay alguna dependencia). Puede deshacerse del error presentando el contenido dinámico de forma condicional, es decir, mostrándolo cuando se han obtenido los datos.
return ( <> <h1>{quizTitle.length>0 ? quizTitle : "Loading Question"}</h1> <p>{quizDesc.length>0 ? quizDesc: "Loading Description"}</p> <ul> {mcqOptions && mcqOptions.length>0 && mcqOptions.map(option=>{ return(<li key={Math.random()}>{option}</li>) //Using Math.random() for key to ensure all the mapped items have an unique key } } </ul> </> ); Alternativamente, si su mcqOptions es una matriz de objects , puede map en consecuencia, por ejemplo, algo como esto,
<ul> {mcqOptions && mcqOptions.length>0 && mcqOptions.map(mcqOption=>{ return(<li key={mcqOption.id}>{mcqOption.text}</li>) //Use the properties accordingly, this is an example only. } } </ul>