Question

我正在尝试实现静态方法以使代码更整洁。一直有效，直到我尝试这样做：

// Auth.js
import {useDispatch} from 'react-redux';
import {signOut} from './redux_actions';

export class Auth {
    static signOut = () => {
        const dispatch = useDispatch();
        dispatch(signOut())
    }
}

// Menu.js
import {Auth} from '../../auth'
...
...
<MenuItem onClick={() => {Auth.signOut()}}><ExitToAppIcon className="icon"></ExitToAppIcon><span>log out</span></MenuItem>

但是我得到一个错误：

Invalid Hook call, You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app

我真的不知道我在做什么错。可能我还是不太了解该体系结构。感谢您的帮助！

编辑：

根据已接受的答案，此方法有效

import { myStore } from './index'

export default class Auth {
    static signOut = () => {
        myStore.dispatch(signOut())
    }
}

Answer 1

您正在尝试在类中使用react钩子。这是不可能的。

您必须处于功能组件中才能使用钩子。

如果需要使用类，则可以使用connect（）HOC连接组件。

Answer 2

您不能在事件处理程序中使用useDispatch或任何其他钩子。挂钩只能在顶层使用。

这应该有效：

export class Auth {
    static useSignOut = () => {
        const dispatch = useDispatch();
        return () => dispatch(signOut())
    }
}

// Menu.js
import {Auth} from '../../auth'
...
...
const signOut = Auth.useSignOut(); // now `useDispatch` is called at top level
<MenuItem onClick={signOut}><ExitToAppIcon className="icon"></ExitToAppIcon><span>log out</span></MenuItem>

Answer 3

这是rules of React Hooks：

从React函数组件中调用钩子
从自定义挂钩呼叫挂钩

似乎您是从外部函数（也不是函数组件，也不是customHook）中调用钩子useDispatch，这就是为什么会出现此错误的原因。

您可以在组件内部调用const dispatch = useDispatch(); dispatch(signOut());，或者如果您确实想保留Auth类，则可以直接从存储区调用dispatch函数（不使用钩子），例如这个：

 import store from './path/to/your/store'

 export class Auth {
   static signOut = () => {
     store.dispatch(signOut())
   }
 }

无效的钩子调用-React Redux

3 个答案: