React Hook“useState”无法在顶层调用

Question

我是反应初学者。我正在尝试使用 React-hooks 将数据库的值从一个文件发送到另一个文件，并收到以下错误，任何人都可以帮助我解决此问题吗？

第 5:41 行：React Hook“useState”无法在顶层调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 React-hooks/rules-of-hooks 代码：

import React, {useState, useEffect} from "react";

import Axios from "axios";

const [collegeList, setcollegeList]=useState([]);
useEffect(()=>{
    Axios.get("http://localhost:3001/api/get").then((response)=>{
        setcollegeList(response.data);
    });
}, []);

CollegeList = collegeList;
export default CollegeList;

Answer 1

你必须在react组件中使用react hooks。我可以向您推荐两种方法来解决此问题。

首先）在您的组件中执行此操作

import React, {useState, useEffect} from "react";
import Axios from "axios";

function CollegeListComponent() {
const [collegeList, setcollegeList]=useState([]);

useEffect(()=>{
    Axios.get("http://localhost:3001/api/get").then((response)=>{
        setcollegeList(response.data);
    });
}, []);

return "YOUR VIEW ELEMENTS"

第二）将其用作反应钩子

import React, {useState, useEffect} from "react";
import Axios from "axios";

// making a custom react hook like this
function useCollegeList() {
   const [collegeList, setcollegeList]=useState([]);

   useEffect(()=>{
       Axios.get("http://localhost:3001/api/get").then((response)=>{
           setcollegeList(response.data);
       });
   }, []);

return { collegeList }

然后您可以在组件中导入 useCollegeList 来使用它

Answer 2

只需将 useState 挂钩移动到组件中即可。 React 中的 Hook 只能从组件主体中调用。