Utilicé axios en useEffect de mi componente wrapper y envié los datos como props al otro componente "singleQuestionnaire", en el componente singleQuestionnaire, desestructuré los datos, en el primer intento, funciona bien, pero después de recargar la página no funciona t funciona con un error: no se puede leer la propiedad "mapa" de indefinido
import React, { useEffect, useState } from "react"; import SingleQuestionnaire from "./SingleQuestionnaire"; import { fetchQuestions } from "../../../api/index"; const Questionnaires = ({ match }) => { const [questions, setQuestions] = useState([]); const pid = match.params.id; const getQuestionnaire = async (pid) => { try { const { data } = await fetchQuestions(pid); console.log(data.data, "action in component"); setQuestions(data.data); } catch (error) { console.log(error); } }; useEffect(() => { getQuestionnaire(pid); }, []); console.log("all questions", questions); return ( <div> <SingleQuestionnaire questions={questions} setQuestions={setQuestions} /> </div> ); }; export default Questionnaires;y este es mi componente singleQuestionnaire:
import React, { useEffect, useState } from "react"; const SingleQuestionnaire = ({ questions, setQuestions }) => { const [questionnaire, setQuestionnaire] = useState([]); console.log(questions); const { data } = questions; console.log("data", data.farmInformationQuestionnaireData); return <div>simple component</div>; }; export default SingleQuestionnaire;Por primera vez, en la consola puedo ver los datos "data.data.farmInformationQuestionnaireData". Es una matriz, pero por segunda vez no está definida.
está sucediendo debido a la llamada a la API asíncrona. Cuando realiza una llamada asíncrona, el subproceso no espera, continúa y comienza a ejecutar otras cosas. Ahora su llamada asíncrona podría estar completa, pero su devolución de llamada no se ejecutará hasta que la pila esté vacía, así es como funciona javaScript. Te recomiendo que uses algún tipo de cargador de gif o texto.
{questions ? <SingleQuestionnaire questions={questions} setQuestions={setQuestions} /> : <p>Loading...</p>}porque las preguntas en SingleQuestionnaire son una matriz vacía antes de que busquemos, lo que causa un error aquí
const { data } = questions; puede agregar un texto de carga porque inicialmente las questions serán una matriz vacía, luego será su res.data (suponiendo que sea un objeto)
const SingleQuestionnaire = ({ questions, setQuestions }) => { const [questionnaire, setQuestionnaire] = useState([]); console.log(questions); if(questions.length === 0 ) return <h1> Loading</h1> const { data } = questions; console.log("data", data.farmInformationQuestionnaireData); return <div>simple component</div>; };