2 
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 只能在函数组件的主体内调用。

在此处输入图像描述

4

2 回答 2

3

查看Hooks 规则以了解它们的限制以及它们的用途。

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

与其他答案和评论不同，导入 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

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

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

话虽如此，由于您没有解释您要完成的工作，因此我们无法告诉您如何解决它。告诉您在另一个组件中使用Routes 它可能会产生误导。

1. 虽然在 React 文档中被称为元素，但在处理prop-types时它被称为节点。

于 2020-01-02T20:21:08.460 回答
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>);
};

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

更新：

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

您还需要做些什么才能使其包含在Admin组件render功能中，如下所示：

class Admin extends Component {
   // rest of your code

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

         <Routes />
      </>
   }
}

我希望这有帮助！

于 2020-01-02T19:42:43.847 回答