在事件处理程序错误中调用钩子（useMutation）：“只能在函数组件的主体内部调用钩子”

Posted 2023-03-08

【中文标题】在事件处理程序错误中调用钩子（useMutation）：“只能在函数组件的主体内部调用钩子”

【英文标题】：Calling a hook (useMutation) inside an event handler error: "Hooks can only be called inside of the body of a function component"

【发布时间】：2019-10-06 07:58:49

【问题描述】：

我想在事件处理程序中使用突变。我的事件是这样定义的：

(JSX attribute) onOk?: ((e: React.MouseEvent<any, MouseEvent>) => void) | undefined

这就是我从客户端调用突变的方式

export const IMPORT_INFO_MUTATION = gql`
  mutation ImportPolicy($data: ImportPolicyInput!) 
    importPolicy(data:$data)
    
      _id
      name
    
 

最终我这样称呼它：

      onOk=() => 

        useImportPolicyMutation(
          variables: 
            data: 
              jsonData: JSON.parse(importPolicyData)
            
          ,
        )
      

`不要担心突变中的变量和参数。他们很好。问题是我收到以下错误：

Unhandled Rejection (Invariant Violation): Invalid hook call. Hooks can only 
be called inside of the body of a function component. This could happen for 
one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

这是一个钩子，因为 useMutation 是这样定义的：

  return ReactApolloHooks.useMutation<ImportPolicyMutation, ImportPolicyMutationVariables>(
   ImportPolicyDocument,
baseOptions
 )

那么，如何在事件处理程序中调用突变？

【参考方案1】：

那么，如何在事件处理程序中调用突变？

钩子仅适用于功能组件，不适用于基于类（使用 apollo client.mutation() 或 <Mutation/> 组件） useMutation 返回旨在按需使用的函数 - 此函数必须在事件处理程序中使用，而不是整个 useMutation

react-apollo-hooks 项目描述包含usemutation 与事件处理程序一起使用的示例。

【讨论】：

好的，从 UI 的角度来看，在我想使用它的同时创建 useMutation 是有意义的。当用户按下 OK 按钮时。看这个时，我似乎需要创建一个像 OK1 这样的中间按钮，其中 useMutation 创建一个函数，当按下 OK2 时我可以执行这个函数

无条件使用钩子（要求）-useMutation 创建一个函数-您可以使用它或不使用它-UI 可以使用它或不使用它-它不是 UI 角色来决定何时创建函数 UI 可以使用

现在明白了，是的，是类 ReactApolloHooks.useMutation 造成了这个问题。谢谢！