Axios GET 请求在 React 中的 ERR_INSUFFICIENT_RESOURCES 错误答案

【问题标题】：ERR_INSUFFICIENT_RESOURCES errors on Axios GET request In ReactAxios GET 请求在 React 中的 ERR_INSUFFICIENT_RESOURCES 错误
【发布时间】：2021-03-14 18:19:46
【问题描述】：

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

我的 React 代码是这样的：

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 次以上，我不明白如何。

谢谢！

【问题讨论】：

您在每次渲染后提出请求
@zb22 但是即使我删除了 useEffect() 它仍然保持不变
查看我的更新答案

标签： javascript reactjs axios

【解决方案1】：

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

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

【讨论】：

谢谢，它有效。但是，VSCode 给我一个警告说“useEffect 缺少依赖项：'items'。要么包含它，要么删除依赖项数组”。当我将“项目”添加到数组或删除数组时，问题又回来了。那我能用这个警告做什么呢？
@ZivAviv 你可以忽略这个，或者把整个代码放在useEffect()的一个函数中，然后从useEffect()本身调用它，useEffect(() => {const func = () => {...} func() }, [])