在 React 本机 useEffect 中，使用异步调用我得到一个未定义的，在以下情况下如何避免未定义？

Question

These are calls I am using In UseEffect due to the short delay, I am getting undefined in the TAGID, later I am getting data and setting in setState.Now the issue is next I am calling the firebase, there it was storing an undefined document in Firestore database to avoid that undefined or any other approach with firebase calls. How to call the Firestore call in the useEffects or how to avoid that undefined in this case.

useEffect(() => {
  const fetchData = async () => {
    const resData = await axios(apiURL);
    if (resData.data) {
      setTag(resData.data);
    }
  };

  fetchData();
  const TAGID = "" + tag.id + "";
  const USERID = "" + viewer.id + "";
  const tagsListener = db.doc(TAGID).onSnapshot(function (doc) {
    if (doc.exists) {
      const getData = doc.data();
      setTaginfo(getData);
    } else {
      db.doc(TAGID).set(tagSaveData);
      setTaginfo(tagSaveData);
    }
  });
  return () => tagsListener();
}, []);

Answer 1

fetchData is an async function, you should wait until it finishes, you can do this:

fetchData().then(tag=> {
const TAGID = "" + tag.id + "";
const USERID = "" + viewer.id + "";
const tagsListener = db.doc(TAGID).onSnapshot(function (doc) {
    if (doc.exists) {
      const getData = doc.data();
      setTaginfo(getData);
    } else {
      db.doc(TAGID).set(tagSaveData);
      setTaginfo(tagSaveData);
    }
  });
}
)

Answer 2

After returning promise also I am getting undefined in the return

useEffect(() => {
      const fetchData = async () => {
        const resData = await axios(apiURL);
        if (resData.data) {
          setTag(resData.data);
        }
      };
    
      fetchData().then(newTagID =>{
    if(tag){
    tag.id
    return;
    }
    })
      const TAGID = "" + newTagID.id + "";
      const USERID = "" + viewer.id + "";
      const tagsListener = db.doc(TAGID).onSnapshot(function (doc) {
        if (doc.exists) {
          const getData = doc.data();
          setTaginfo(getData);
        } else {
          db.doc(TAGID).set(tagSaveData);
          setTaginfo(tagSaveData);
        }
      });
      return () => tagsListener();
    }, []);