Intentando crear una pequeña aplicación como parte de una tarea universitaria usando React. La tarea básica es crear una página que tenga una pregunta y luego una de 5 respuestas. Ahora tengo las respuestas almacenadas en un documento de Firestore.
He creado (el comienzo de) un componente de botón personalizado.
Entonces, el código que tengo contacta a Firestore y recupero los datos. Los ejemplos que probé en uni han sido para obtener 1 bit de datos, no así. Lo que estoy tratando de hacer es crear una "matriz" de respuestas que luego pueda iterar y crear mis botones personalizados. Sin embargo, no puedo dejar de descubrir cómo crear la matriz de respuestas.
¿Alguien puede darme una pista?
import React, {useEffect, useState} from 'react'; import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import 'firebase/compat/storage'; import Button from '../components/Button'; function AnswerComponent() { const firestore = firebase.firestore(); //const storage = firebase.storage(); const collectionId = "Balances"; const documentId = "Answers" const [answers, setAnwsers] = useState([]); useEffect(() => { const getFirebase = async () => { const snapshot = await firestore.collection(collectionId).doc(documentId).get(); const questionData = snapshot.data(); // now we add the answers and correct flag to our answers const answerArr = []; Object.keys(questionData).forEach(key => { answerArr.push(questionData[key]); setAnwsers(answerArr) }); }; getFirebase(); },[answers, firestore]) console.log(">>", answers) return ( <div className="col-12"> <h3 className="text-center">Answer</h3> <div className="p-3 mb-2 bg-light"> <div className="row"> </div> {/* {btns} */} </div> </div> ) } export default AnswerComponent;Si necesita insertar nuevas respuestas en la matriz, esta solución guarda cada respuesta como un objeto con una clave (preservando la clave).
const answerArr = []; Object.keys(questionData).forEach(key => { answerArr.push({ [key]: questionData[key] }); setAnswers(newAnswerArr); });Si no necesita la clave, puede guardar un paso y usar Object.values:
const answerArr = []; Object.values(questionData).forEach(questionValue => { answerArr.push(questionValue); }); setAnwsers(answerArr);O con cualquiera de las soluciones, podría reducir en lugar de configurar anwserArr por separado:
const answerArr = Object.values(questionData).reduce((acc, questionValue) => { acc.push(questionValue) return acc; }, []); setAnswers(answerArr)Parece que está tratando de configurar Respuesta varias veces seguidas (lo que cambiará la respuesta) cuando hace esto:
Object.keys(questionData).forEach(key => { console.log(key, questionData[key]); setAnwsers(key, questionData[key]) });En cambio, intentaría crear una matriz única, luego establecería las respuestas en esa matriz.
const answerArray = [] Object.keys(questionData).forEach(key => { console.log(key, questionData[key]); answerArray.push(questionData[key]); }); setAnswers(answerArray)Resulta que cualquiera de los códigos funciona (gracias tanto a @chris-bradshaw como a @radicalturnip. El problema fue que olvidé los cambios de useEffect en cada cambio. Así que se activó useEffect, obteniendo datos, que estaba desencadenando un cambio, que ejecutó useEffect, que obtuvo más data y desencadeno otro cambio, etc etc x infinito.