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

Question

我想在用户每次使用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 像:

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

并且它仍然给出无限增量，有没有一种方法可以在不遇到此类问题的情况下计算 View ？

Answer 1

问题

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

事实上，在第二个片段中，问题几乎是相同的，组件的每个渲染/重新渲染都会重新声明 handleClick 函数，这是依赖项数组中的一个新引用，它会触发 useEffect 回调。

解决方案

使用挂载(空依赖数组)useEffect来触发数据库集合更新。

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

尚不清楚 postId 和 increment 值来自何处，但我假设在组件代码中的先前位置您已访问相同的集合并检索了“初始值” “查看数据库中的值。