useContext()终止，没有任何错误消息

Question

在下面的代码片段中，执行从未到达useNavigate()行。它在useContext()行结束，没有任何错误消息。然而，我设法在另一个地方使用useContext而没有任何问题。这让我认为问题与，我在哪里以及如何调用logOut和相关使用econtext有关。

import AuthContext from '../store/auth-context';
import { useState, useRef, useContext } from 'react';
export default function LogOut()  {
const authCtx = useContext(AuthContext);
const navigator = useNavigate();

authCtx.logout();
// optional: redirect the user
navigator('/dbsection');

return;
};

调用LogOut的位置:

import logOut from '../components/logOut.js';
<NavBtn>
<NavBtnLink to='/formLogIn'>Log In</NavBtnLink>
<NavBtnLink to='/dbsection' onClick={logOut}>Log Out</NavBtnLink>
</NavBtn>
</Nav>

我试图从useContext()钩子创建一个实例。我想调用相关上下文的函数，但无法创建实例。

Answer 1

问题的原因是useContext钩子是通过onClick句柄调用/触发的。我不知道为什么，但是出于某种原因，React不允许这样做。我只是将外部'logOut'函数的内容移动到我调用logOut的组件中，并且useContext也可以工作。为什么React不允许使用econtext钩子，或者所有的钩子都可以通过onClick句柄调用，这对我来说仍然是一个问题。