屏幕没有更新，但在数据库更新时获取控制台日志

Question

我正在构建后端应用程序，当下订单时，我得到控制台日志，但屏幕没有更新，后退按钮（反应导航）也没有更新，几秒钟后响应。

  const GetdataUsers = async () => {
    let grabbedData1 = [];
          let customerList1 = [];
          await firebase
            .database()
            .ref(`/serviceProvider/${user1.uid}/franchise/customers`)
            .orderByKey()
            .on("value", (snapshot) => {
              customerList1.push(snapshot.val());
              // setCustomerList(customerList1);
              if (customerList1) {
                Object.keys(customerList1).map(function (key) {
                  let y = customerList1[key];
                   Object.keys(y).map(function (key2) {
                      let x = y[key2]; // get all customer id
                      // From that id fetch all the orders they have
                       firebase
                        .database()
                        .ref(`/orders/${x}`)
                        .orderByKey()
                        .on("value", (snapshot, key) => {
                          grabbedData1.push(snapshot.val());
                          console.log("grabbedData1....",grabbedData1);
                          // Grab all orders from the customers and set it
                          setShowloading(false);
                          setOrders(grabbedData1);
                        });
                    })
                });
              }
            });
  };

  useEffect(() => {
    GetdataUsers();
  }, []); // [orders] tried this way also

当在括号中下订单时，如上所示，后退按钮冻结并且没有得到任何更新。还尝试从 useEffect 内的函数和 setorder 返回数据，但陷入循环。

Answer 1

在第一个查询中，我获取他们拥有的所有客户 ID，其中
"x" (let x = y[key2];) 然后另一个查询该客户的所有订单
(x) 将其存储到订单 (setOrders(grabbedData1);) 并存储到
在应用程序上打印

我在代码中看到的问题：

1. 您关心 getDataUsers 函数中的数组变化。
2. 您有一组嵌套的 Firebase 订阅，它们必然依赖于刚刚更新的 customerList。
3. 您不会取消订阅任何 Firebase 快照订阅。

我认为最好将其分成两个单独的操作或效果，一个用于处理用户的 uid 更改以设置当前的 customerList 状态，第二个用于处理当 customerList 状态更新时获取/更新订单状态。

示例：

当用户更改时更新客户列表。

useEffect(() => {
  const unsubscribe = firebase
    .database()
    .ref(`/serviceProvider/${user1.uid}/franchise/customers`)
    .orderByKey()
    .on("value", (snapshot) => {
      setCustomerList(snapshot.val());
    });

  return unsubscribe;
}, [user1.uid]);

当客户列表更新时更新订单。

useEffect(() => {
  const innerSubscriptions = [];

  if (customerList) {
    setOrders([]); // <-- clear orders for new customers list
    Object.values(customerList).forEach((customer) => {
      Object.values(customer).forEach((id) => {
        const unsubscribe = firebase
          .database()
          .ref(`/orders/${id}`)
          .orderByKey()
          .on("value", (snapshot, key) => {
            const order = snapshot.val();
            // Grab all orders from the customers and merge
            setOrders((orders) => [...orders, order]);
          });
        innerSubscriptions.push(unsubscribe);
      });
    });
  }
  return () => {
    innerSubscriptions.forEach((unsubscribe) => unsubscribe());
  };
}, [customerList]);

Answer 2

您已经创建了一个异步函数，但没有使用await 关键字。此外，您还必须为加载程序创建一个状态，并有条件地渲染加载程序组件，直到获取所有数据为止。