React Hooks Error: хуки могут быть вызваны только внутри тела компонента функции - PullRequest
Новая
       10

React Hooks Error: хуки могут быть вызваны только внутри тела компонента функции

0 голосов
/ 28 октября 2018

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

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}

Ответы [ 14 ]

0 голосов
/ 05 ноября 2018

Моя проблема была в том, что я забыл обновить модуль react-dom. См. Вопрос .

0 голосов
/ 04 ноября 2018

Мне удалось решить эту проблему, импортировав примитивные хуки React в файл компонента, а затем передав их в мои пользовательские хуки.По какой-то причине ошибка возникает только тогда, когда я импортирую ловушку React (например, useState) в свой пользовательский файл ловушек.

Я импортирую useState в свой файл компонента: 

import React, {useState} from 'react'; // import useState

import {useCustomHook} from '../hooks/custom-hook'; // import custom hook

const initialState = {items: []};
export default function MyComponent(props) {
    const [state, actions] = useCustomHook(initialState, {useState});
    ...
}

Затемв моем файле ловушек: 

// do not import useState here

export function useCustomHook(initialValue, {useState}) {
    const [state, setState] = useState(initialValue || {items: []});

    const actions = {
        add: (item) => setState(currentState => {
            const newItems = currentState.items.concat([item]);
            return {
                ...currentState,
                items: newItems,
            };
        }),
    };

    return [state, actions];
}

Этот метод улучшил тестируемость моих ловушек, потому что мне не нужно макетировать библиотеку React для предоставления примитивных ловушек.Вместо этого мы можем передать фиктивный useState хук прямо в функцию пользовательского хука.Я думаю, что это улучшает качество кода, поскольку ваши пользовательские хуки теперь не связаны с библиотекой React, что позволяет более естественное функциональное программирование и тестирование.

0 голосов
/ 30 октября 2018

Проблема для меня была действительно реагирующий горячий загрузчик .

Вы можете отключить реактивный горячий загрузчик для отдельного компонента вместо всего приложенияиспользуя метод cold следующим образом: 

import { cold } from 'react-hot-loader'

export const YourComponent = cold(() => {

  // ... hook code

  return (
    // ...
  )
})

ИЛИ 

export default cold(YourComponent)
0 голосов
/ 28 октября 2018

Обновлено: 2018-Dec

Новая версия react-hot-loader вышла, ссылка .Крючки теперь работают из коробки.Спасибо автору, Каше.

Проверьте этот шаблон https://github.com/ReeganExE/react-hooks-boilerplate

  • React Hooks
  • React Hot Loader
  • Webpack, Babel,ESLint Airbnb

Предыдущий ответ:

Сначала убедитесь, что вы установили react@next и react-dom@next.

Затем проверьте,используете react-hot-loader или нет.

В моем случае отключите горячий загрузчик и HMR может заставить его работать.

См. https://github.com/gaearon/react-hot-loader/issues/1088.

Цитата:

Да.БРЗ на 100% не совместимо с крючками.Это объясняется всего несколькими причинами:

SFC преобразуются в компоненты класса.Есть причина - иметь возможность принудительного обновления на HMR, пока на SFC нет метода «обновления».Я ищу другой способ принудительного обновления (как это. Таким образом, RHL убивает SFC.

"hotReplacementRender". RHL пытается выполнить работу React и отрисовать старое и новое приложение, чтобы объединить ихИтак, очевидно, что сейчас это не работает.

Я собираюсь составить PR, чтобы смягчить обе проблемы. Он будет работать, но не сегодня.

Есть более правильноеисправление, которое работало бы - холодный API

Вы можете отключить RHL для любого пользовательского типа. 

import { cold } from 'react-hot-loader';

cold(MyComponent);

Поиск "useState/useEffect" в исходном коде компонента и "cold "it.

Обновлено:

В соответствии с обновлено от сопровождающего реактора-загрузчика, вы можете попробовать react-hot-loader@next и установить конфигурацию следующим образом: 

import { setConfig } from 'react-hot-loader';

setConfig({
  // set this flag to support SFC if patch is not landed
  pureSFC: true
});

Спасибо @loganfromlogan за обновление.

Страница:
...