React useEffect hook load onsnapshot 有条件地反应

Question

我正在尝试执行以下操作，但似乎无法获得最合适的解决方案： 在我的 React 应用程序（应用程序组件）的顶层，我正在加载 firebase 和 firestore。我有一个反应上下文，其中存储了我的身份验证信息。身份验证上下文不会立即加载，而是在一段时间后加载。我正在使用 onAuthStateChanged（来自 firebase）来等待它。我的代码如下所示：

const firebase = new Firebase(); //custom class, instantiates firebase
const [authData, setAuthData] = useState({
  firebase,
  user: null,
  isInitializing: true,
  userdata: { info: null, data: null }
});

useEffect(() => {
  // listen for auth state changes
  const unsubscribe = firebase.auth.onAuthStateChanged(async returnedUser => {
    //set Auth data into state to pass into context
    setAuthData({ ...authData, user: returnedUser, isInitializing: false });
  });
  // unsubscribe to the listener when unmounting
  return () => unsubscribe();
}, []);

现在我想为这个组件添加一个监听器来监听 firebase cloud firestore 中的配置文件数据。他们为此提供了一个 onShapshot 函数。

在哪里添加该侦听器？因为我不想打太多电话。我可以安全地将侦听器放在取消订阅功能中吗？卸载时如何确保监听器订阅？

首先我尝试了一个额外的 useEffect 钩子，如下所示：

useEffect(() => {
  if (authData.isInitializing || authData.user === null) return;
  const ref = firebase.db.doc("/env/" + process.env.REACT_APP_FIRESTORE_ENVIRONMENT + "/users/" + authData.user.uid);
  return ref.onSnapshot(doc => {
    setAuthData({ ...authData, userinfo: doc.data() });
  });
}, []);

这不起作用，因为它只运行一次（在挂载时），然后它什么也不返回，因为它仍在初始化，我不能将它设置为在每次更新时运行，因为它会一直查询 firestore、更新状态和查询（无限循环）。

在上下文中传递状态有效，我可以在任何地方使用它（身份验证状态）。我只想能够在上下文中拥有基本的用户数据。现在，我可以手动添加它（当用户登录时，获取用户配置文件 + 数据并存储在状态中），但我也想处理这些数据的更新，所以我需要 onSnapshot 监听器。如何确保我只调用一次监听器？

Answer 1

在上下文中传递状态有效，我可以在任何地方使用它（身份验证状态）。我只想能够在上下文中拥有基本的用户数据。现在，我可以手动添加它（当用户登录时，获取用户配置文件 + 数据并存储在状态中），但我也想处理这些数据的更新，所以我需要 onSnapshot 监听器。如何确保我只调用一次监听器？

听起来您想使用React.useEffect() 中的数组参数。 React.useEffect() 的第二个参数是一个依赖数组。当这些依赖中的任何一个发生变化时，效果将再次执行。

如果您使用的是 eslint，react-hooks eslint plugin 将在您使用在闭包中捕获变量但不将这些变量放入 deps 数组中的钩子时突出显示。

以下更改将确保onSnapshot 只添加一次每个组件：

useEffect(() => {
  if (authData.isInitializing || authData.user === null) return;
  const ref = firebase.db.doc("/env/" + process.env.REACT_APP_FIRESTORE_ENVIRONMENT + "/users/" + authData.user.uid);
  return ref.onSnapshot(doc => {
    setAuthData({ ...authData, userinfo: doc.data() });
  });
}, [authData.isInitializing, authData.user]);

执行的提取次数将与您拥有的组件数量成线性关系。如果您预计此钩子会被多次使用，您可能需要考虑一个模型，其中 firebase.db.doc() 调用仅在 one 组件中调用，但许多组件可以订阅商店。这与 React Redux 的工作方式非常相似，我建议您查看他们的代码以了解如何实现这一点。

哦，如何以这种方式返回（ubsubscribe 监听器）？我可以像我在原来的第二个代码块中写的那样做吗？那么如果 isInitializing === true --> 只返回，否则返回取消订阅函数？

是的，这会很好。除非调用onSnapshot()，否则不需要取消订阅功能。