Реакция использования useState / Hooks In HOC Причины Ошибка «Хуки могут вызываться только внутри тела компонента функции» - PullRequest
Новая
       2

Реакция использования useState / Hooks In HOC Причины Ошибка «Хуки могут вызываться только внутри тела компонента функции»

0 голосов
/ 15 апреля 2019

Разрешено ли использовать крючки внутри компонента высшего порядка? Когда я пытаюсь сделать это с помощью этого простого шаблона, я получаю сообщение об ошибке Invalid hook call. Hooks can only be called inside of the body of a function component.

// App.js
import React, { useState } from 'react';

const WithState = (Component) => {
  const [state, dispatch] = useState(0);
  return () => <Component state={state} dispatch={dispatch} />;
}

const Counter = ({ state }) => {
  return (
    <div style={{ textAlign: 'center', margin: '0 auto'}}>
      {state}
    </div>
  )
}

const CounterWithState = WithState(Counter);

const App = () => {
  return <CounterWithState />;
}

export default App;

1 Ответ

3 голосов
/ 15 апреля 2019

Я считаю, что вы должны использовать крючки внутри HOC: 

const WithState = (Component) => {
  const WithStateComponent = () => {
    const [state, dispatch] = useState(0);
    return <Component state={state} dispatch={dispatch} />;
  }
  return WithStateComponent;
}
...