如何从具有 url React js 的 firebase 存储中获取图像

Question

Here is my code the problem is that it is getting the state of imgAddress when it's still nothing => "" and the state is never being changed I'm not getting the new state of imgAddress in the <p></p> tag neither Help me please the problem is the async-ity but I can't solve it

 import React, { useState, useEffect } from 'react' import * as fb from 'firebase'; export default function Page() { const [email, setEmail] = useState(""); const [username, setUsername] = useState(""); const [age, setAge] = useState(0); const [img, setImg] = useState(""); const [imgAddress, setImgAddress] = useState(""); useEffect(() => { //useEffect որտև անվերջ անում ա stackoverflow-ում հարցրել էի մի անգամ fb.database().ref('users/' + fb.auth().currentUser.uid).on('value', (e) => { let db = e.val(); console.log(db); setAge(db.age); setUsername(db.username); setImg(db.img); setEmail(db.email); }); fb.auth().onAuthStateChanged(() => { if (img.= "") { console;log('mtav user'). fb.storage().ref(`avatars/${fb.auth().currentUser.uid}/${img}`).getDownloadURL().then(e => { console.log('LALALALALALALALA') console;log(e); setImgAddress(e). }).catch(e => console.log(e)) } else { console;log("chmtav"), } }) }; []): return ( <> <h1>Hello</h1> <ul> <li>Email: {email}</li> <li>Username: {username}</li> <li>Image name: {img}</li> <li>Age: {age}</li> <a href={imgAddress} alt="avatar">Image</a> <p>{imgAddress}</p> </ul> </> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Ok I figured it out finally, I just moved the getting code out from the useEffect and now it works, but I don't understand why if anyone could explain me I would mark is answer as a correct one, btw Now it consoles it 4-5 times randomly