触发注销自定义钩子

Question

我正在尝试在我的应用程序上构建自定义钩子，这是我的代码：

import { useContext } from 'react'
import { UserContext } from '../components/context/UserContext'
import { useHistory } from "react-router-dom";

const useLogout = () => {
    const [, setUser] = useContext(UserContext);
    let history = useHistory()
    setUser(null);
    history.push('/login')
}

export default useLogout;

这很容易理解，当我触发useLogout时，我想删除有关当前用户的信息，然后将用户重定向到登录页面。

然后，我有了一个带有注销按钮的Navbar组件。我想在单击注销按钮时触发自定义钩子：

...
<Logout onClick={useLogout} />

当我单击时，我收到一条错误消息：

我没有得到它，因为当我启动钩子时，我在一个React组件中，而我的所有组件都是功能组件。

那我对定制钩子不了解的部分是什么？

Answer 1

useLogout自定义钩子：

const useLogout = () => {
        const [, setUser] = useContext(UserContext);
        let history = useHistory()
       
        return () => {
           setUser(null);
           history.push('/login')
        }
        
    }

在Navbar组件函数主体中，您可以使用以下自定义钩子：

const logout = useLogout()

在yourLogout组件中：

<Logout onClick={logout} />

我希望这会有所帮助。谢谢

Answer 2

好的，根据反应文档，不允许在eventHandler上调用钩子：https://reactjs.org/warnings/invalid-hook-call-warning.html