在useEffect中调用useDispatch触发React Hooks规则错误如何解决

• 违反React Hooks调用规则：所有React Hook必须在函数组件顶层作用域或者自定义Hook内部调用，你的代码将useDispatch放在了useEffect的回调函数中执行，属于在普通回调函数内调用Hook，因此触发react-hooks/rules-of-hooks校验报错。
• 存在API使用错误：useDispatch是用于获取Redux dispatch方法的Hook，本身不支持直接传入Action对象触发状态更新。

两步修改即可实现需求：

1. 在组件顶层作用域调用useDispatch，拿到dispatch函数实例
2. 在useEffect回调中调用获取到的dispatch函数，传入需要触发的Action

修改后的组件代码如下：

import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

const Component = () => {
  const images = useSelector(getImages)
  // 组件顶层调用useDispatch获取dispatch方法
  const dispatch = useDispatch()

  useEffect(() => {
    // 调用dispatch触发对应action
    dispatch(myModules.actions.setMaskVisible(true));
  }, [images, dispatch]); // 把dispatch加入依赖数组，符合Hooks规则
}

补充说明：React Redux保证useDispatch返回的dispatch函数引用稳定，因此加入依赖数组不会导致useEffect额外触发重执行。

内容的提问来源于stack exchange，提问作者mouchin777