钩子只能在函数组件的内部调用。 (脸书.me/react-invalid-hook-call)

Question

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

使用这段代码我有类似× Hooks can only be called inside of a function component.

的错误

Answer 1

从技术上讲，您缺少 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>);
};

此外，我在 <span> 元素中添加了一个 Array.prototype.map() 来表示数组中的名称。对于代码示例，我删除了您的 if 语句。

更新：

另外，根据评论，问题与在 Admin 组件外部调用代码中的 Routes 组件有关。

您还需要做些什么才能将其包含到 Admin 组件 render 函数中，如下所示：

class Admin extends Component {
   // rest of your code

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

         <Routes />
      </>
   }
}

希望对您有所帮助！

Answer 2

查看 Rules of Hooks 了解它们的限制以及它们的用途。

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.

与其他答案和评论不同，导入 React 和 returning JSX 不是将函数视为组件的要求。

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

React 组件的最低要求：

return 一个 React element¹ 可以是任何可以呈现的东西：数字，字符串、其他元素或任何这些元素的数组。
请注意，布尔值和 null 将被忽略。严格返回 undefined（或不返回 returning，两者相同）将失败。
那么它必须作为组件使用：<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

这就是您收到错误的原因。

当您在 Routes 函数内的正确位置调用 useEffect 时，由于它不是在 React 的渲染流程中调用的，因此 React 正在检测它，就好像它是在函数外部一样组件.

话虽这么说，但由于您没有解释您想要完成的目标，我们无法告诉您如何修复它。告诉您在另一个组件中按原样使用 Routes 可能会产生误导。

^{1.虽然在 React 文档中称为 element，但在处理 prop-types.}[= 时称为 node 23=]

钩子只能在函数组件的内部调用。 (脸书.me/react-invalid-hook-call)

Hooks can only be called inside the body of a function component. (fb.me/react-invalid-hook-call)

javascript

reactjs

react-hooks

react-functional-component

React 组件的最低要求：