我正在使用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> </>
它使用了
cancelBubble
和stopPropagation
,但是没有用。
我正在Redux上构建React应用,在fetchDashboard下面是Redux的动作。它被多次调用,就像如果我们第一次单击它,那么它将被调用1次,然后如果我们单击它,则它被多次调用...
[我想原因是因为每当您单击锚标记时,由于依赖项数组中的toggleCategory
,它将再次附加category
函数。如果category
值正在更改,useEffect
挂钩的回调将再次触发。
=>删除useEffect依赖关系'catagory'并将其设为'[]',以便在安装组件时该效果仅运行一次。