如何在没有按钮的情况下调用一次 Axios 响应

如何解决如何在没有按钮的情况下调用一次 Axios 响应

我是使用 react 和 Axios 的新手，我创建了一个 get 请求，我可以用一个按钮调用它一次，但是我不想要这个按钮，而是希望在页面加载/使用页面，以便用户可以立即看到它。但是当我的函数被连续调用并导致网络浏览器崩溃时，我不明白为什么会发生这种情况，我用谷歌搜索过，但找不到任何东西。这是运行的代码。

厨房.js

import React from 'react';
import { Container } from 'react-bootstrap';
// import Axios from 'axios';
import { Link } from 'react-router-dom';
import GetFood from './getFood';

export default function Kitchen() {

    return(
        <Container>
        <div>
            <h1>This is the kitchen portal</h1>
            <Link to='/gettingfood'><button>Get Food</button></Link>
            <Link to="/addingfood"><button>Add food</button></Link>
            <Link to="/deletefood"><button>Delete Food</button></Link>
        </div>
        <GetFood/>
        </Container>
        );
}

GetFood.js

import React,{ useState } from 'react';
import Axios from 'axios';

export default function GetFood() {

      const [responseData,setResponseData] = useState([])
    // fetches data
    async function fetchData(){
        await Axios.get("http://localhost:3001/getfood").then((response)=>{
            setResponseData(response.data);
            console.log(response.data);
            alert("information received!")
        })
        .catch((error) => {
            console.log(error)
        })
    }
    fetchData();
    return (
        <div>
            <button onClick={fetchData}>Get</button>
            {responseData.map((val,key)=>{
                return (
                <div>
                    
                    <div id="data">
                        
                        <p>Item:{val.item}</p>
                        <p>Price:{val.price}</p>
                        
                    </div>
                </div>
            )
            })}
        </div>
    )
}

解决方法

在 React 中，函数组件在每次渲染时都会被调用。

要创建副作用，例如从外部源请求数据，您应该使用 useEffect 钩子。

这个钩子接受一个要执行的函数和一个依赖数组，它定义了何时调用提供的函数。 如果您指定一个空数组，则仅在第一个渲染周期调用该函数。 如果您指定任何变量，该函数将在第一个渲染周期和在任何指定的变量发生变化时被调用。

这应该代替您对 fetchData() 的调用：

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