Hooks can only be called inside the body of a function component. (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;
  }
};

With this code I have error like × Hooks can only be called inside the body of a function component.

回答1:

Take a look at the Rules of Hooks to understand their restrictions and what they're meant to be used for.

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

Unlike other answers and comments, importing React and returning JSX is not a requirement for a function to be considered a component.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

The minimal requirements of a React component:

1. return a React element¹ which can be anything that can be rendered: numbers, strings, other elements or an array of any of these.
   Note that booleans and null are ignored. Returning strictly undefined (or not returning, which is the same) would fail.

2. then it must be used as a component: <MyComponent /> or React.createElement(MyComponent) inside the rendering phase.

You're not using Routes as a React component, you're calling it as a function, outside the rendering phase.

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

This is why you're getting the error.

While you're calling it at the right place inside the function, since it's not called within React's rendering flow, React is detecting it as if it was outside of a function component.

---

That being said, since you're not explaining what you're trying to accomplish, we can't tell you how to fix it. Telling you to use Routes as it is inside another component might be misleading.

---

^{1. While referred as element in the React documentation, it's known as a node when dealing with prop-types.}

回答2:

Technically you are missing 2 important steps, the import React part and returning JSX.

What you can do to make it work is the following:

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>);
};

Additionally I have added an Array.prototype.map() to represent the name from your array in a <span> element. For the code sample I have removed your if statement.

Update:

Also based on the comments the issue is related to calling outside of Admin component the Routes component in your code.

What you need to do also to make it work to include into the Admin component render function as the following:

class Admin extends Component {
   // rest of your code

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

         <Routes />
      </>
   }
}

I hope this helps!

来源：https://stackoverflow.com/questions/59569066/hooks-can-only-be-called-inside-the-body-of-a-function-component-fb-me-react-i