不能在顶层调用React挂钩“useState”

Question

我是反应的初学者。我试图将我的数据库的值从一个文件发送到另一个使用反应挂钩，并得到以下错误有人能帮我吗？

第5:41行：不能在顶层调用React钩子“useState”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则代码中调用React钩子：

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

您必须在反应组件中使用反应挂钩。我可以向你推荐两种方法来解决这个问题。

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

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以使用它