React Native + Firebase 9，不能使用 off() 参考取消订阅 onValue 更改答案

【问题标题】：React Native + Firebase 9, cant use off() with reference to unsubscribe from onValue changesReact Native + Firebase 9，不能使用 off() 参考取消订阅 onValue 更改
【发布时间】：2021-12-06 05:50:25
【问题描述】：

Firebase 9，实时数据库/react native with expo。

问题：我无法取消订阅 firebase RTD onChange 事件监听器。

文档说：“在父侦听器上调用 off() 不会自动删除在其子节点上注册的侦听器；还必须在任何子侦听器上调用 off() 才能删除回调。” Firebase docs

错误：当我尝试在引用上使用.off 时，我得到reference.off() is not a function

const db = getDatabase();
const reference = ref(db, "users/" + props.userId);

const updateScore = (snapshot) => {
  if (snapshot.val() !== null) setHighScore(highscore);
};

useEffect(() => {
  if (props.userId === "") props.navigation.navigate("Auth");
  else onValue(reference, updateScore);
  
  // throws error reference.off() is not a function
  return () => reference.off();
}, [props.userId]);

我也尝试过reference.unsubscribe() 和reference.removeEventListener(updateScore)，但没有成功。它们都触发了相同的错误reference.**** is not a function。

如果不清除此事件侦听器，我的应用程序中有内存泄漏。

【问题讨论】：

作为提供更好用户体验的附注，请确保无论 userId 来自何处，您已经处理了在 Firebase Auth 验证时 currentUser 可以是 null 的短暂时刻会议。如果处理不当，您可能会发现当您已经登录时会被导航到登录。还可以考虑通过导航调用传递当前页面，以便用户在完成登录后返回到当前页面。

标签： reactjs firebase firebase-realtime-database expo

【解决方案1】：

对于 v9，当您调用 onValue 时，它会返回一个取消订阅函数，如 reference docs for onValue 所示。所以要取消订阅：

useEffect(() => {
  if (props.userId === "") props.navigation.navigate("Auth");
  else return onValue(reference, updateScore);
}, [props.userId]);

【讨论】：