CODEWITHSUNDEEP
javascriptreactjsfirebasenext.js
JJang
JJang

Reputation: 41

I am in making an app with react and firebase. there's problem about sequential execution, asynchronous execution

These are the parts of my codes. but there's error at " const data = {} " and try { someing }

because, before this "const data" definition, there are some of "if~~s". In this ", if statements", they set "state" of imgs.

Before setting the data in these 3 "if statements", Send data to Firebase. This seems to be creating an error. Please some advice, please.

const [title, setTitle] = useState('')
const [client, setClient] = useState('')
const [theday, setTheday] = useState('')
const [tech, setTech] = useState('')
const [url, setUrl] = useState('') 
const [imgThumb, setImgThumb] = useState(null)
const [imgPC, setImgPC] = useState(null)
const [imgMo, setImgMo] = useState(null)
const [imgBg, setImgBg] = useState(null) 
const [content, setContent] = useState('')
const [tags, setTags] = useState('')
const [cat, setCat] = useState('');


const createProject = async () => {     

if( imgThumb != null ) {
  let randomName = uuid();
  const imageRef = ref(storage, `project-images/${imgThumb.name + randomName}`); 
  uploadBytes(imageRef, imgThumb).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgThumb.name + randomName}`)).then((url)=>{          
      setImgThumb(url)
    })
  });
}

if( imgPC != null ) {
  let randomName1 = uuid();
  const imageRef1 = ref(storage, `project-images/${imgPC.name + randomName1}`); 
  uploadBytes(imageRef1, imgPC).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgPC.name + randomName1}`)).then((url)=>{          
      setImgPC(url)
    })
  });
}

if( imgMo != null ) {
  let randomName2 = uuid();
  const imageRef2 = ref(storage, `project-images/${imgMo.name + randomName2}`); 
  uploadBytes(imageRef2, imgMo).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgMo.name + randomName2}`)).then((url)=>{          
      setImgMo(url)
    })
  });
}

if( imgBg != null ) {
  let randomName3 = uuid();
  const imageRef3 = ref(storage, `project-images/${imgBg.name + randomName3}`); 
  uploadBytes(imageRef3, imgBg).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgBg.name + randomName3}`)).then((url)=>{          
      setImgBg(url)
    })
  });
}    


 // setting data before send to firebase  

const data = {
  title: title,
  client: client,
  completedDay: theday,
  tech: tech,
  url: url,
  imgThumb: imgThumb,
  imgPC: imgPC,
  imgMo: imgMo,
  imgBg: imgBg,      
  content: content,
  tags: tags,
  cat: cat,
  author: {name: auth.currentUser.displayName, id: auth.currentUser.uid }
}


try {
  const docRef = await addDoc(collection(db, "projects"), data);
  console.log("document has created: ", docRef.id);
} catch (e) {
  console.error(e);
}

}

Upvotes: 1

Views: 44

Answers (1)

Mohammad Danish
Mohammad Danish

Reputation: 60

so the error is state variables need some time to update the value [in very simple language] so, before the value of state is updated, you are using that value which is null

instead you can use useRef() as


const [title, setTitle] = useState('')
const [client, setClient] = useState('')
const [theday, setTheday] = useState('')
const [tech, setTech] = useState('')
const [url, setUrl] = useState('') 

const imgThumbUrl = useRef(null)
const imgPCUrl= useRef(null)
const imgMoUrl = useRef(null)
const imgBgUrl = useRef(null) 

const [content, setContent] = useState('')
const [tags, setTags] = useState('')
const [cat, setCat] = useState('');


const createProject = async () => {     

if( imgThumb != null ) {
  let randomName = uuid();
  const imageRef = ref(storage, `project-images/${imgThumb.name + randomName}`); 
  uploadBytes(imageRef, imgThumb).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgThumb.name + randomName}`)).then((url)=>{          
      //setImgThumb(url)
        imgThumbUrl.current = url
    })
  });
}

if( imgPC != null ) {
  let randomName1 = uuid();
  const imageRef1 = ref(storage, `project-images/${imgPC.name + randomName1}`); 
  uploadBytes(imageRef1, imgPC).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgPC.name + randomName1}`)).then((url)=>{          
    //   setImgPC(url)
        imgPCUrl.current = url
    })
  });
}

if( imgMo != null ) {
  let randomName2 = uuid();
  const imageRef2 = ref(storage, `project-images/${imgMo.name + randomName2}`); 
  uploadBytes(imageRef2, imgMo).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgMo.name + randomName2}`)).then((url)=>{          
    //   setImgMo(url)
        imgMoUrl.current = url
    })
  });
}

if( imgBg != null ) {
  let randomName3 = uuid();
  const imageRef3 = ref(storage, `project-images/${imgBg.name + randomName3}`); 
  uploadBytes(imageRef3, imgBg).then(()=> {        
    getDownloadURL(ref(storage, `project-images/${imgBg.name + randomName3}`)).then((url)=>{          
    //   setImgBg(url)
        imgBgUrl.current = url
    })
  });
}    


 // setting data before send to firebase  

const data = {
  title: title,
  client: client,
  completedDay: theday,
  tech: tech,
  url: url,
  imgThumb: imgThumb.current,
  imgPC: imgPC.current,
  imgMo: imgMo.current,
  imgBg: imgBg.current,      
  content: content,
  tags: tags,
  cat: cat,
  author: {name: auth.currentUser.displayName, id: auth.currentUser.uid }
}


try {
  const docRef = await addDoc(collection(db, "projects"), data);
  console.log("document has created: ", docRef.id);
} catch (e) {
  console.error(e);
}

Upvotes: 2

Related Questions