挂钩只能在功能组件的主体内部调用. (fb.me/react-invalid-hook-call) [英] 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.

推荐答案

看看挂钩规则以了解其限制以及它们的用途.

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

不要在循环，条件或嵌套函数中调用挂钩.相反，请始终在React函数的顶层使用挂钩.通过遵循此规则，可以确保每次渲染组件时都以相同的顺序调用Hook.

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.

与其他答案和评论不同，导入功能和返回JSX并不是将功能视为组件的要求.

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

从概念上讲，组件就像JavaScript函数一样.它们接受任意输入(称为道具")，并返回描述应该在屏幕上显示的内容的React元素.

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

React组件的最低要求:

1. 返回一个React element ¹ ，它可以是可以呈现的任何东西:数字，字符串，其他元素或其中任何一个的数组.
   请注意，布尔值和null被忽略.严格返回undefined(或不返回，这是相同的)将失败.

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.

然后必须将其用作组件:渲染阶段内的<MyComponent />或React.createElement(MyComponent).

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

您没有将Routes用作React组件，而是在呈现阶段之外将其作为函数调用.

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.

虽然您在函数内部的正确位置调用它，但是由于未在React的渲染流程中调用它，所以React会将其检测为好像在函数组件之外.

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.

话虽如此，由于您没有解释要完成的工作，因此我们无法告诉您如何解决.告诉您在其他组件内部使用Routes 可能会产生误导.

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.虽然在React文档中称为 element ，但在处理 道具类型 .}

这篇关于挂钩只能在功能组件的主体内部调用. (fb.me/react-invalid-hook-call)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！