每次有人使用 firebase 和 Reactjs 访问页面时计算浏览量

Posted 2023-02-22

【中文标题】每次有人使用 firebase 和 Reactjs 访问页面时计算浏览量

【英文标题】：Count views every time someone visit the page with firebase and Reactjs

【发布时间】：2021-12-23 23:49:13

【问题描述】：

我想在用户每次使用 react-router-dom 和 Firebase 访问页面时计算浏览量，我有这个代码：

//useHistory is the react-router-dom dependency 
const history = useHistory();

const handleClick = () => history.push('/post');

if(handleClick) 
  db.collection("posts").doc(postId).update(
    views: increment,
  )

它的作品但是它给了一个无限循环我试过 useEffect Like:

useEffect(() => 
  if(handleClick) 
    db.collection("posts").doc(postId).update(
      views: increment,
    )
  
, [handleClick]) 

它仍然给出了无限的增量，有没有办法计算视图而不运行这种类型的问题？

【问题讨论】：

我认为你可以只使用一个空的依赖数组？所以它只会在页面装载时增加。

谢谢，当我删除依赖时它工作了

【参考方案1】：

问题

不清楚第一个 sn-p 是如何创建渲染循环的，但它肯定是不正确的。组件的每次渲染/重新渲染都会重新运行函数组件体，这意味着每次渲染 handleClick 都会重新声明，并且 OFC 的 if (handleClick) 条件将始终为真（因为它是刚刚定义的以上），“posts”集合每次都会更新。

确实，在第二个 sn-p 中，问题几乎相同，组件的每个渲染/重新渲染都重新声明了 handleClick 函数，这是依赖数组中的一个新引用，它触发了 useEffect 回调。

解决方案

使用挂载（空依赖数组）useEffect 触发数据库集合更新。

useEffect(() => 
  db.collection("posts")
    .doc(postId)
    .update(
      views: increment,
    );
, []);

目前尚不清楚postId 和increment 值的来源，但我假设您之前在组件代码中的某个地方访问过同一个集合并从数据库中检索了“初始”views 值。