Estoy practicando reaccionar y cómo incorporar reaccionar a firebase/firestore. Ahora quiero hacer algo como un CMS usando la base de datos Firestore. Obtuve con éxito datos de la base de datos y lo confirmé mediante el registro de la consola. Pero el problema es que cada vez que intento pasar el objeto para usarlo como mis accesorios, me arroja un error. Pero si agrego el código después de que la página esté completamente cargada, los datos se cargan correctamente y me arroja un error después de actualizar la página.
Creo que tiene algo que ver con la solicitud asincrónica, pero no sé cómo lograrlo.
const app = initializeApp(firebaseConfig) const db = getFirestore(app); const [data, setData] = useState({}); const fetchData =async () => { const docRef = doc(db, "data", "RSVp8ljO95Dpwa0oSs0G"); const docSnap = await getDoc(docRef); const dataTest = docSnap.data(); await setData(dataTest); console.log("Document data:", dataTest); } useEffect(() => { fetchData(); }, []) return ( <div style={{overflow: 'hidden'}}> <NavBar /> <div style={{width: '100%', height:'81vh', padding: '5%', overflow:'scroll'}}> <Container > <div className="d-flex flex-wrap justify-content-center"> <TrainingSchedule **date={data.event1.date} //I want to pass the object here but throws me an error** month='SEPT' eventTitle='Lets Get to know each other' eventDescription='Have a drink with our finest coach and enjoy the summer' time='1pm' backgroundColor= 'CadetBlue' />......
indíquenos el error para que podamos entender completamente el problema. pero por ahora, prueba esto:
date={data.event1.date || null} esto debería hacer que la fecha se vuelva nula si los datos no están listos, luego se actualizan en el siguiente procesamiento que es causado por setState.
Hola @Juls: Bienvenido a StackOverflow.
En su ejemplo, está tratando de acceder a propiedades en data que no existen en el primer renderizado (antes de que se ejecute el gancho de efecto). Por eso te da el error. En su lugar, verifique para asegurarse de que el objeto y las propiedades que necesita existan antes de intentar acceder a ellos:
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.15.7/babel.min.js"></script> <div id="root"></div> <script type="text/babel" data-type="module" data-presets="env,react"> const {useEffect, useState} = React; async function getDataFromAPI () { await new Promise(res => setTimeout(res, 1000)); return { event1: { date: '2021-09-18' } }; } function Example () { // Leave the state value undefined instead of initializing it as an empty object const [data, setData] = useState(); useEffect(() => { const fetchData = async () => { const fetchedData = await getDataFromAPI(); setData(fetchedData); }; fetchData(); }, []); return ( <div> { // Check if the data exists before trying to access its properties: data ? (<div>{data.event1.date}</div>) : (<div>Data is being fetched...</div>) } </div> ); } ReactDOM.render(<Example />, document.getElementById('root')); </script>