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

【问题标题】：How do I call an Axios response once and without a button如何在没有按钮的情况下调用一次 Axios 响应
【发布时间】：2021-05-10 12:01:05
【问题描述】：

我是使用 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>
    )
}

【问题讨论】：

你每次渲染组件时调用fetchData，这会更新responseData，它会重新渲染组件，它调用fetchDat，它...见reactjs.org/docs/hooks-effect.html。跨度>
正确的做法是使用 useEffect 钩子。就像@jonrsharpe 建议的那样，浏览文档，这些是反应的基础。了解渲染如何在反应中工作。
好的，谢谢，我没有意识到

标签： javascript reactjs axios get runtime-error

【解决方案1】：

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

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

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

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

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

【讨论】：