我想在事件处理程序中使用突变。我的事件定义如下:
(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
它是一个钩子(Hook),因为 useMutation 的定义如下:
return ReactApolloHooks.useMutation<ImportPolicyMutation, ImportPolicyMutationVariables>(
ImportPolicyDocument,
baseOptions
)
那么,如何在事件处理程序中调用突变?
最佳答案
So, how do I call a mutation inside an event handler?
- Hook 仅适用于功能组件,不适用于基于类的组件(使用 apollo
client.mutation()
或<Mutation/>
组件) -
useMutation
返回旨在按需使用的函数 - 该函数必须在事件处理程序中使用,而不是整个useMutation
react-apollo-hooks 项目描述包含 usemutation 的示例与事件处理程序一起使用。
关于reactjs - 在事件处理程序中调用 Hook (useMutation) 错误 : "Hooks can only be called inside of the body of a function component",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56212612/