Хуки могут вызываться только внутри тела функционального компонента. (fb.me/react-invalid-hook-call)

import  { useEffect } from "react";

export const Routes = () => {
  useEffect(() => {
    console.log("red")
  }, []);

  const a = [{ name: "sathish" }];
  const b = [{ name: "pandi" }];
  const c = [{ name: "suren" }];
  if (false) {
    return a;
  } else {
    return b;
  }
};

С этим кодом у меня есть ошибка типа × Хуки могут быть вызваны только внутри тела функционального компонента.

h ttps://stackru.com/images/6af61b383a699b663889a39081b61344a0b56c4c.png

Источник

2 ответа

Решение

Технически вам не хватает двух важных шагов: import React часть и возвращение JSX.

Вот что вы можете сделать, чтобы заставить его работать:

import React, { useEffect } from 'react';

export const Routes = () => {
  useEffect(() => {
    console.log("red")
  }, []);

  const a = [{ name: "sathish" }];
  const b = [{ name: "pandi" }];
  const c = [{ name: "suren" }];

  return a.map((e, i) => <span key={i}>{e.name}</span>);
};

Дополнительно я добавил Array.prototype.map() для представления имени из вашего массива в <span>элемент. Для примера кода я удалил вашif заявление.

Обновить:

Также, судя по комментариям, проблема связана с звонками за пределами Admin компонент Routes компонент в вашем коде.

Что вам нужно сделать, чтобы он работал, чтобы включить его в Admin составная часть render функционируют следующим образом:

class Admin extends Component {
   // rest of your code

   render() {
      return <>
         {/* rest of the code */}

         <Routes />
      </>
   }
}

Надеюсь, это поможет!

Источник

Взгляните на Правила хуков, чтобы понять их ограничения и для чего они предназначены.

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

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

Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые "реквизитами") и возвращают элементы React, описывающие, что должно появиться на экране.

Минимальные требования компонента React:

  1. вернуть элемент React 1, который может быть чем угодно, что может быть отображено: числами, строками, другими элементами или массивом любого из них.
    Обратите внимание, что логические иnullигнорируются. Вернувшись строгоundefined (или не вернуться, что то же самое) потерпит неудачу.

  2. тогда его нужно использовать как компонент: <MyComponent /> или React.createElement(MyComponent) внутри фазы рендеринга.

Вы не используете Routes как компонент React, вы вызываете его как функцию вне фазы рендеринга.

import Cookies from 'js-cookie';
import { Routes } from 'routes.js'
import { Redirect } from 'react-router-dom';
const routes = Routes(); // <-- Called as a function, not a component

Вот почему вы получаете сообщение об ошибке.

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

При этом, поскольку вы не объясняете, чего пытаетесь достичь, мы не можем сказать вам, как это исправить. Говорю вам использоватьRoutes поскольку он находится внутри другого компонента, может вводить в заблуждение.

1. В документации React он называется элементом, но при работе с prop-типами он известен как узел.

Источник
Другие вопросы по тегам