Tengo un problema con mi aplicación reaccionar y express/mongodb donde la primera carga miscData
no está definida (que es el nombre de mi colección en mi base de datos mongodb), pero cuando comento todas las etiquetas de párrafo y solo console.log(getBasic)
Puedo registrarlo (cuando antes no podía registrarlo debido a que no estaba definido) y luego, cuando elimino los comentarios de las etiquetas de párrafo, puedo verlos ahora, eso es hasta que actualizo, lo que restablece esto.
Tengo una declaración de console.log y luego 3 párrafos html que muestran los títulos del blog. Cuando inicio por primera vez, no funciona hasta que hago el comentario guardar, descomentar guardar, actualizar el método mencionado anteriormente.
Aquí hay un video de 1 minuto que muestra de lo que estoy hablando si eso no tiene mucho sentido.
Aplicación.js:
function App() { const [getBasic, setGetBasic] = useState() async function fetchData() { await axios.get('http://localhost:3001/api') .then(result => setGetBasic(result.data)) } useEffect(() => { fetchData() }, []) return ( <div className="App"> <p>{JSON.stringify(getBasic.miscData[1].blogTitle)}</p> <p>{JSON.stringify(getBasic.miscData[2].blogTitle)}</p> <p>{JSON.stringify(getBasic.miscData[3].blogTitle)}</p> {console.log(`getBasic ${JSON.stringify(getBasic)}`)} </div> ); } export default App;
servidor.js:
app.get('/api', (req, res) => { res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); res.header( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' ); db.collection('miscData').find().toArray((err, result) => { if (err) return console.log(err) res.send({ miscData: result }) }) })
Así es como se ve miscData
:
getBasic {"miscData":[{"_id":"62604421b57b621bda4171c7","blogTitle":"Different title","blogBody":"lorem ipsum etc etc etc"},{"_id":"626058bb61967575695bdade","blogTitle":"Com squadron","blogBody":"asidjaoisdoasodjiaosjdoia"},{"_id":"626059f961967575695bdadf","blogTitle":"test","blogBody":"test"},{"_id":"62605a3d36e02b8581f56154","blogTitle":"asdasda","blogBody":"adadada"},{"_id":"62608bc60bd6de526fd1b0bc","blogTitle":"new title","blogBody":"new body"}]}
Mi React es el puerto 3000 y el servidor es 3001
En realidad, el método fetchData()
es una llamada asíncrona, es decir, el término asíncrono se refiere a dos o más objetos o eventos que no existen o que suceden al mismo tiempo (o varias cosas relacionadas que suceden sin esperar a que se complete la anterior) link .
Mientras que las etiquetas <p>
son código síncrono, se procesan incluso antes de que sus datos se obtengan del backend. Por lo tanto, recibe indefinido por un tiempo y tan pronto como se obtiene, las etiquetas <p>
se completan y puede verlas. Esto también explica por qué se reinicia cuando lo actualizas.