React 中 Axios GET 请求出现 ERR_INSUFFICIENT_RESOURCES 错误

Question

我有一个 mongoDB，其中包含商店中的商品。使用 React，我想根据数据库中的每个条目渲染项目卡。就此而言，我使用 Axios 向我的服务器发送 GET 请求，该服务器将处理从数据库中提取数据的操作。

我的反应代码是这样的：

import React, { useEffect, useState } from 'react';
import axios from "axios";

function App() {
const [items, setItems] = useState([{}]);
useEffect(() => {
    axios.get('/item').then(res => {
       (res.data).forEach(entry => {
           setItems(prevItems => {
               return [...prevItems, entry];
           })
       });
    }).catch(err => console.log(err));
})

return (
    ...
)
}

我成功获取了数据，但在 Chrome 控制台中，我收到不间断的 ERR_INSUFFICIENT_RESOURCES 错误，最终导致 Chrome 崩溃。为什么会发生这个错误？我正在使用 useEffect() ，因为 React 文档说它相当于功能组件中的 componentDidMount() 。我可以使用什么替代方案？

编辑：当我删除 useEffect() 时，错误不断出现，并且使用 React 开发工具我看到在项目中我有 80 个条目，这意味着请求被触发 10 次以上，但我不明白如何触发。

谢谢！

Answer 1

您在每次渲染后发出请求。添加[]作为第二个参数，useEffect()以便在第一次渲染后发出一次请求。

const [items, setItems] = useState([{}]);
useEffect(() => {
    axios.get('/item').then(res => {
       setItems(res.data)
    }).catch(err => console.log(err));
}, [])