javascript - how to set value after map function runs in useEffect

Question

This is the real code here I am getting setOrder empty, I am trying keep away from map loop due infinite render how could pass grabbedData1 value to setOrder. I know setOrder gets value before .map runs. I eneven tried to "customerList1" .map in another function but i get infinite render error

  const GetdataUsers = async () => {
    let grabbedData = [];
    console.log("setUserdata....", grabbedData.length);
    await firebase
      .database()
      .ref(`/users/${user1.uid}`)
      .orderByKey()
      .on("value", (snapshot, key) => {
        // console.log("snapshot....", snapshot);
        grabbedData.push(snapshot.val());
        setUserdata(grabbedData);
        console.log("setUserdata", grabbedData.length);
        if (grabbedData) {
          let customerList1 = [];
          firebase
            .database()
            .ref(`/serviceProvider/${user1.uid}/franchise/customers`)
            .orderByKey()
            .on("value", (snapshot) => {
              customerList1.push(snapshot.val());
              setCustomerList(customerList1);
              console.log("setCustomerList", customerList1);
              if (customerList1) {
                let grabbedData1 = [];
                Object.keys(customerList1).map(function (key) {
                  let y = customerList1[key];
                  return Object.keys(y).map(function (key2) {
                    let x = y[key2];
                    console.log("xxxxxxxxx", x);
                    firebase
                      .database()
                      .ref(`/orders/${x}`)
                      .orderByKey()
                      .on("value", (snapshot, key) => {
                        // console.log('snapshot....', snapshot);
                        grabbedData1.push(snapshot.val());
                      });
                  });
                });
                if (grabbedData1) {
                  setOrders(grabbedData1);
                  console.log("setOrders", grabbedData1.length);
                }
              }
            });
        }
      });
  };

  useEffect(() => {
    GetdataUsers();
  }, []);

question from:https://stackoverflow.com/questions/65858322/how-to-set-value-after-map-function-runs-in-useeffect

Answer 1

I can't reproduce the code and test because of the Firebase but maybe you can try changing the scope of 'grabbedData1' to a wider scope and returning it from the function.

Possible solution:

const GetdataUsers = async () => {
    let grabbedData = [];
    let grabbedData1 = [];
    ...
    ...
    return grabbedData1;
}

useEffect(() => {
    const data = GetdataUsers();
    if(data)
        setOrders(data);
}, []);