Вызов хука (useMutation) внутри ошибки обработчика событий: «Хуки можно вызывать только внутри тела функционального компонента»

Я хочу использовать мутацию в обработчике событий. Мое событие определяется так:

(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
 )

Итак, как мне вызвать мутацию внутри обработчика событий?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
3 914
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

So, how do I call a mutation inside an event handler?

  1. Хуки ТОЛЬКО для функциональных компонентов, не для класса (используйте компонент apollo client.mutation() или <Mutation/>)
  2. useMutation возвращает функцию, предназначенную для использования по запросу — эта функция должна использоваться в обработчике события, а не целиком useMutation

Описание проекта react-apollo-hooks содержит пример использования использовать мутацию с обработчиком событий.

Хорошо, дело в том, что с точки зрения пользовательского интерфейса имеет смысл создать useMutation в то же время, когда я хочу его использовать. Когда пользователь нажимает кнопку OK. Глядя на это, кажется, что мне нужно создать среднюю кнопку, например OK1, где useMutation создает функцию, и при нажатии OK2 я могу выполнить эту функцию.

Contentop 20.05.2019 02:09

Хуки используются безоговорочно (требование) - useMutation создает функцию - вы можете ее использовать или нет - пользовательский интерфейс может использовать ее или нет - это не роль пользовательского интерфейса решать, когда создать функцию, которую может использовать пользовательский интерфейс

xadm 20.05.2019 02:15

Теперь понял, да, это был класс ReactApolloHooks.useMutation, который создал эту проблему. Спасибо!

Contentop 20.05.2019 02:18

Другие вопросы по теме