React Redux：多次调用 Useeffect

Question

我正在尝试向基于 div 的 class 名称添加点击事件侦听器，这里是代码，

useEffect(() => {
const element = document.querySelectorAll('some-class');
element[0].addEventListener('click',(e)=>{
If(isTrigger)
{
dispatch(setIsTrigger(false))
}
else
{
dispatch(setIsTrigger(true))
}
}, [isTrigger])

这里尝试折叠和展开 div class 基于 isTrigger 值。但是多次调用，如何避免？

有人能帮忙吗

Answer 1

我暂时将 redux 排除在等式之外。而不是 redux 让我们假设你在你发布的片段之上有这个：

[isTrigger, setIsTrigger] = useState(false);

效果正在更新 isTrigger，这是效果的依赖项。这将导致它进入循环。下面看看你没有使用 redux 的效果：

useEffect(() => {
    const element = document.querySelectorAll('some-class');
    element[0].addEventListener('click',(e)=>{
    if(isTrigger)
    {
        setIsTrigger(false)
    }
    else {
        setIsTrigger(true)
    }
}, [isTrigger])  // since its a dependency here, its going to get called everytime 
                 // isTrigger is updated. Since your updating it in the function, you get a loop

希望这有助于解释多次。

至于解决collapse/expand，真的需要效果吗？不确定你的代码是什么样子或者你的 redux 状态（我看到你正在使用 dispatch），但是一个可能的解决方案：

const isTrigger = useSelector(selectIsTrigger);

handleClick = () => {
    dispatch(setIsTrigger(!isTrigger));
};

return (
    ... some stuff
    <div click={handleClick}></div>
)

我希望这至少能有所帮助。

另外请注意，您还应该在效果之后进行清理，因为您要添加一个事件侦听器。 Effects with Cleanup。当您的组件卸载时，您应该这样做。通过清理，您将避免多次监听事件和内存泄漏。

示例：

useEffect(() => {
  document.addEventListener('click', handleClick);

  return () => document.removeEventListener('click', handleClick);
}, [handleClick]);

React Redux：多次调用 Useeffect

React Redux: Useeffect calling multiple times

reactjs

react-redux

react-hooks