不能在顶层调用React Hook“usestate”

Question

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钩子。我可以向你推荐两种方法来解决这个问题。

首先）在组件中执行

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 }