Проблема с использованием React Hooks

Question

Я получаю эту ошибку при попытке использовать useState в реакции:

https://i.imgur.com/XLQ7oq7.png

У меня:

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

Answer 1

Я бы рекомендовал прочитать эту документацию: https://reactjs.org/docs/hooks-intro.html

Перехватчики React могут только использоваться в функциональном компоненте, и они не должны использоваться в возврат / рендеринг.

Попробуйте это:

function component() {
 const [gridMode, setGridMode] = useState(false);

 return() {
  <button onClick={()=> setGridMode(true)}>Change hook state!</button>
  //an example of how to manipulate your hook
 }
}

Answer 2

Как говорится в сообщении об ошибке, «Хуки могут быть вызваны только внутри тела функционального компонента», но у вас есть компонент класса. Вам нужно сначала использовать компонент функции , а не компонент класса, а затем убедиться, что вы вызываете useState из верхнего уровня компонента, а не из другой функции внутри него.

Документация React включает этот точный сценарий в качестве примера того, почему вы можете получить эту ошибку: