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

Question

我是 React 和 Axios 的新手，我创建了一个 get 请求，我可以用一个按钮调用它一次，但是我不想要这个按钮，而是希望在页面 loads/with 页面，以便用户可以立即看到它。但是当调用我的函数时，一旦它被连续调用并使网络浏览器崩溃，我不明白为什么会这样，我用谷歌搜索但找不到任何东西。这是获取运行.

的代码

kitchen.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>
    )
}

Answer 1

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

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

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

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

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

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

How do I call an Axios response once and without a button

javascript

runtime-error

get

reactjs

axios