Обещание не работает в React useEffect в сочетании с Firebase

Question

Я хочу получить данные из firebase внутри функции useEffect, например:

  useEffect(() => {
   /** nope */
   async function fetchData() {
     let dataObject = {};
     let dataArray = [];
     setAttendees({});

     // You can await here
     if (newData[listRedux]) {
       const request = await Object.keys(newData[listRedux] . 
       [1].attendees).map(
         user => {
           usersRef.child(user).on('value', snap => {
             dataObject[snap.key] = snap.val();
             setAttendees(dataObject);
             console.log(dataObject);
             let comp = (
               <Avatar
                 key={snap.key}
                 size="small"
                 source={snap.val().avatar}
                 alt={snap.val().name}
               />
             );
             dataArray.push(comp);
             setAttendeesComp(dataArray);
           });
         }
       );

       // Wait for all requests, and then setState
       await Promise.all(request).then(() => {
         console.log('done');
       });
     }
   }
   fetchData();
 }, [newData, listRedux]);

Теперь второй console.log внутри обещания all сначала покажет первый, а затем console.log, что означает, что запрос еще не выполнен. Как я могу улучшить свой код, чтобы сначала задать запрос и состояния, а затем продолжить с остальными?

Answer 1

export default function Example() { 
    const [data, dataSet] = useState(false)
    const [attendees, setAttendees] = useState(false)

    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await res.json()
      console.log(response);
      dataSet(response)
    }

 useEffect(() => {
      if (!attendees) return 
      fetchMyAPI();
    }, [attendees, newData, listRedux]);


useEffect(() => {
     setAttendees({})
  }, [])

Дополнительные примеры здесь :