Блог

Главная - Вопросы по программированию - Неверный вызов крючка. Крючки могут вызываться только внутри тела функционального компонента. Даже после использования направляющих крючков

Неверный вызов крючка. Крючки могут вызываться только внутри тела функционального компонента. Даже после использования направляющих крючков

#reactjs #react-hooks #react-dom

Вопрос:

Я пытаюсь использовать крючки внутри функционального компонента. Просто определяя сам крючок, я получаю ошибку.

 import React, { useRef } from "react";

function CreateTemplate() {
  const editorRef = useRef();
  return (<div>something</div>)
}

И этот файл вызывается по щелчку предыдущего компонента, где используется история. Добавление его в

 <button
    onClick={() => {
        history.push({
          pathname: "/create-template",
        });
      }}
    >
      CONFIRM TEMPLATE
</button>

И маршрут определен ниже.

   <Switch>
    <AuthRoute path='/dashboard' render={Dashboard} type='private' />
    <AuthRoute path='/templates' render={Templates} type='private' />
    <AuthRoute
      path='/create-template'
      render={CreateTemplate}
      type='private'
    />
    <Route path='/' render={Dashboard} />
  </Switch>

Ниже приведена версия react и react-dom

 "react": "^17.0.2",
"react-dom": "^17.0.2"

Я не уверен, почему ошибка использования крючка или любого другого крючка выше. Перепробовал почти все возможные решения.

Комментарии:

1. не могли бы вы, пожалуйста, добавить фрагмент ошибки здесь

2. Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин: 1. У вас могут быть несоответствующие версии React и средства визуализации (например, React DOM) 2. Вы, возможно, нарушаете Правила хуков 3. У вас может быть более одной копии React в одном приложении см. reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему

3. пытаться const editorRef = useRef(null);

4. Пожалуйста AuthRoute , поделитесь также компонентом.

Ответ №1:

Скорее всего, вы неправильно отображаете CreateTemplate маршрут, render опора обычно принимает значение функции. В зависимости от вашей AuthRoute реализации, я полагаю, вы можете сделать одно из следующих действий:

Используйте component опору:

 <AuthRoute
  path='/create-template'
  component={CreateTemplate}
  type='private'
/>

Сохраните render реквизит и сделайте анонимный компонент:

 <AuthRoute
  path='/create-template'
  render={routeProps => <CreateTemplate {...routeProps} />}
  type='private'
/>

Если ни то, ни другое не так, то, конечно, нам нужно будет увидеть AuthRoute реализацию вашего компонента, чтобы увидеть, как он отображается.

Комментарии:

1. Это сработало, не могли бы вы объяснить, пожалуйста, что такое «routeProps» и почему нам нужно использовать здесь

2. Реквизиты маршрута @rajm — это history , location , и match реквизиты, предоставляемые Route компонентом, и я предположил, что по синтаксису вы использовали react-router/react-router-dom. Функция render prop имеет доступ ко всем тем же реквизитам маршрута (совпадение, местоположение и история), что и компонент render prop. Вам не нужно проходить через реквизит маршрута, но это хорошая привычка, чтобы начать с них.

Метки: