Promise 不能在 React useEffect 与 Firebase 结合使用

Question

我想在 useEffect 函数中从 firebase 获取数据，如下所示：

  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]);

现在promise all 中的第二个console.log 将首先显示第一个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({})
  }, [])

更多例子here: