为什么多次调用fetchDashboard函数

问题描述 投票:0回答:2

我正在使用Redux构建React应用,在fetchDashboard以下是Redux的操作。它被多次调用,例如,如果我们第一次单击它将被调用1次,然后如果单击2次将被调用2次,依此类推。

var [category, setcategory] = useState("header");
useEffect(() => {
function toggleCategory(e) {
  var cate = this.text.toLowerCase();
  setcategory(cate);
  fetchDashboard(category); 
}
var anchor = document.querySelectorAll("a");
anchor.forEach((a) => a.addEventListener("click", toggleCategory));
anchor.forEach(a =>
  a.text.toLowerCase() === category
    ? a.classList.add("active")
    : a.classList.remove("active")
);
},[category]);

我的返回函数:

     <>
      <nav>
        <ul>
          <li className="logo">
            <a href="/">Tempo</a>
          </li>
          <li>
            <a>Header</a>
          </li>
          <li>
            <a>Navbar</a>
          </li>
          <li>
            <a>Section</a>
          </li>
          <li>
            <a>Inline</a>
          </li>
          <li>
            <a>Aside</a>
          </li>
        </ul>
      </nav>
    </>

它使用了cancelBubblestopPropagation,但是没有用。

我正在Redux上构建React应用,在fetchDashboard下面是Redux的动作。它被多次调用,就像如果我们第一次单击它,那么它将被调用1次,然后如果我们单击它,则它被多次调用...

javascript reactjs react-redux
2个回答
1
投票

[我想原因是因为每当您单击锚标记时,由于依赖项数组中的toggleCategory,它将再次附加category函数。如果category值正在更改,useEffect挂钩的回调将再次触发。


0
投票

=>删除useEffect依赖关系'catagory'并将其设为'[]',以便在安装组件时该效果仅运行一次。

© www.soinside.com 2019 - 2024. All rights reserved.