OnClick 钩子调用 - 反应答案

【问题标题】：OnClick hook call - ReactOnClick 钩子调用 - 反应
【发布时间】：2021-03-19 00:08:43
【问题描述】：

我需要执行一个 graphQL 查询，以便我的用户可以注销。理想情况下，他们会单击logout 按钮，然后执行查询并退出。然而，这并不容易。

到目前为止，这是我的代码：

const LOGOUT = gql`
  mutation Logout {
    logout
  }
`;

const LogoutButton = (props) => {
  const logout = () => {
    useMutation<Record<string, any>>(LOGOUT);
  };

  return (
    <button onClick={logout}>Logout</button>
  )
};

我收到以下错误消息：Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

对于这样一个菜鸟问题，我很抱歉，但我被卡住了。我很感激任何建议。

【问题讨论】：

函数触发了吗？有错误吗？这行不通怎么办？你能给我们一些背景信息吗？
对不起！我刚刚用错误消息更新了问题。
能把整个组件的代码加进去吗？
您在回调函数中有一个使用钩子，这是一个很大的问题，并且肯定会引入一些错误，尽管我不确定这是否是您的问题的原因。看看 useMutation 是如何工作的，但它肯定是放在你的组件中的。

标签： javascript reactjs authentication graphql react-hooks

【解决方案1】：

试试这样的：

const LOGOUT = gql`
  mutation Logout {
    logout
  }
`;

const LogoutButton = (props) => {
  const [logout] = useMutation<Record<string, any>>(LOGOUT);

  return (
    <button onClick={logout}>Logout</button>
  )

};

钩子，也就是以use...() 开头的东西，总是意味着放在你的函数组件的顶层，而不是在回调中。在这种情况下，useMutation 已经返回了您的函数（具体来说，包裹在一个数组中）。

【讨论】：

我的男人！我对 onClick 有一个小问题。如果它对其他人有帮助，这是我收到的错误消息：Type '(options?: MutationFunctionOptions<any, Record<string, any>> | undefined) => Promise<FetchResult<any, Record<string, any>, Record<string, any>>>' is not assignable to type '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'. Types of parameters 'options' and 'event' are incompatible. 我通过将事件处理程序包装在一个胖箭头函数中解决了这个问题：onClick={() => {logout(); }}

【解决方案2】：

错误就是答案。您这里的组件不是功能组件。您可能忘记将逻辑包装到组件中。试试这个：

const LOGOUT = gql`
  mutation Logout {
    logout
  }
`;

const LogoutButton = (props) => {
  const logout = () => {
    useMutation<Record<string, any>>(LOGOUT);
  };

  return (
    <button onClick={logout}>Logout</button>
  )

};

然后调用 LogoutButton 您希望按钮出现的位置。

注意：我没有在此处列出导入，因为我假设您知道需要导入什么才能使其正常工作。

【讨论】：

感谢您的回答！我忽略了它包含在 FC 中，所以它目前看起来像你的答案。对不起，我把它漏掉了。经过漫长的一天，我的大脑被煎炸了。问题似乎出在函数logout 上。该钩子希望在任何附加功能之外被调用。它想处于最高水平。估计是这样说的。它希望是这样的：``` const LOGOUT = gql` mutation Logout { logout } `; const LogoutButton = () => { useMutation>(LOGOUT); .... } ```
然后我们需要查看整个组件。 useMutation 不是从 FC 调用的，否则它不会抛出此错误。或者你的脚本的另一部分抛出了这个错误。
useMutation 是一个钩子，不能在顶层调用。