这是非常简单的使用react挂钩使用效果请学习的基础useffect挂钩的react docs或任何youtube教程，至于答案

import React, { useEffect } from 'react'

const comp = () => {
useEffect(() => {
    fetch("api url").then((res)=>console.log(res))
}, [])

  return (
    <div>comp</div>
  )
}

export default comp

这里，空依赖关系意味着每次页面只加载一次

使用useEffect来完成这个任务。useEffect方法将在组件挂载时以及每次更改一个依赖项数组参数时执行传递的回调。因此：

const Comp = () => {

  useEffect(() => {
    fetch("api url").then((res)=>console.log(res))
  }, []);

  return (
    <div>comp</div>
  )
}

将使回调仅在组件装入时触发一次（因为依赖项数组为空）。

您应该在app.js等主组件中使用useEffect挂钩

import React, {useEffect} from 'react'

  useEffect(() => {

    fetch("api url").then((res)=>console.log(res))

  }, []);

请小心，此操作可能会消耗大量资源（要获取大量数据等）。

import React, { useState, useEffect } from 'react'

const Comp = () => {

const [ data, setData ] = useState([]);

const getData = async () => {
    const res = await fetch("api url");
    const data = await res.json();
    setData(data)
}  

useEffect(()=>{ getData() },[]);

  return (
    <>
    <div>comp</div>
    // dispaly your data here from data state 
    </>
  )
}

export default Comp;

使用useState提取和使用数据

const initialValue = {};

const comp = () => {

 const [data, setData] = useState(initialValue);

 useEffect(() => {

   let ignore = false;
 
   const fetchData = async () => {
         const res = fetch("api url");
         if (ignore) { return; }
         setData(res.json())

         return () => {
            ignore = true;
         }
   }

 , [])

  return (
    <div>comp {data.prop}</div>
  )
}

更多关于working with state更多关于useEffect life cycle
希望能有所帮助

你不需要像这样使用API函数，它会被不断地调用，你需要使用useEffect钩子，当你的组件重载时useEffect会被调用，你可以了解here的useEffect依赖，

import React, { useEffect, useState } from 'react'

const comp = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("api url").then((res)=> {
      console.log(res)
      setData(res)
    } )
  }, [])

  return (
    // use data state to show the data here
    <div>comp</div>
  )
}

export default comp;