javascript - 为什么 fetchDashboard 函数被多次调用

Question

我正在使用 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，但没有起作用。

Answer 1

我猜原因是因为每次单击 anchor 标记时，由于依赖项数组中的category，它都会再次附加toggleCategory函数。如果 category 值发生变化，useEffect 钩子(Hook)的回调将再次触发。

一种可能的方法是将 addEventListener 调用分离到不同的 useEffect Hook 中，其中可能有一个空的或不同的依赖项数组。

解决方案可以更改如下:

const toggleCategory = useCallback(e => {
  // removed line which has the mentioned issue down below in +1:
  // var cate = this.text.toLowerCase();
  setcategory(cate);
  fetchDashboard(category);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {    
  const anchors = document.querySelectorAll('a');
  anchors.forEach((a) => {
    a.addEventListener('click', toggleCategory);
  });
}, [toggleCategory]);

useEffect(() => {
  const anchors = document.querySelectorAll('a');
  anchors.forEach(a =>
    a.text.toLowerCase() === category
      ? a.classList.add('active')
      : a.classList.remove('active')
  );
}, [category]);

对于toggleCategory，建议使用useCallback钩子(Hook):

useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

+1建议:

在功能组件中，即使我没有该行的完整上下文，也没有您在代码中使用的 this : var cate = this.text.toLowerCase() ;。也许也值得一看。

希望这会有所帮助!