React 和 Firebase useEffect 不会更新组件

Question

这是我第一次尝试将 React Native (expo) 与 FireBase 一起使用，我在异步调用上遇到了很多困难。

现在我正在尝试通过 2 次 FireBase 调用来检索一些数据（我不知道这是否正确）。

useEffect(() => {
let isMounted = true;
if (isMounted) {
  let exercies1 = {};
  db.ref("trainings_exercies/" + trainingID + "/exercies").on(
    "value",
    (snapshot) => {
      if (snapshot && snapshot.val()) {
        Object.keys(snapshot.val()).map((e) => {
          db.ref("exercies/" + e).on("value", (snapshot) => {
            for (let key in snapshot.key) {
              exercies1[snapshot.key] = snapshot.val();
            }
            setExerciesList(exercies1);
            console.log("---> ", exercies1);
          });
        });
      }
    }
  );
}
return () => {
  isMounted = false;
};
}, []);

我的回报是这样的：

{console.log("exercies", exerciesList)}

这是控制台，组件首先在返回里面打印控制台日志，但是当它设置新的状态时，它并没有更新组件：

在继续之前只添加了 e001 元素。

我该如何解决这个问题？以及如何处理对 FireBase 的调用，以便在设置状态之前等待应答？

非常感谢您的帮助， 如果您需要更多信息，我也可以上传整个代码。

Answer 1

代码的最后一行 }, []); 那个空数组 [] 使 useEffect 挂钩只运行一次。

据我所知，我没有看到您正在使用状态对象，如果您可以像 }, [state]); 一样在最后调用 useEffect 并且每次状态更改时都会触发它。

尝试从钩子中删除[]，如果检测到更改，它应该会使react重新渲染组件。

线

return () => {
  isMounted = false;
};

是一种清理方法，只有在组件被丢弃/卸载后才会触发，因此 useEffect 挂钩中的代码永远不会得到 isMounted = false

react website 上的大部分内容都有很好的记录

希望这会有所帮助。