Блог

У меня есть 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 dev я вижу, что в элементах у меня 80 записей, что означает, что запрос запускается более 10 раз, и я не понимаю, как.

Спасибо!

Вы делаете запрос после каждого рендеринга. добавьте [] в качестве второго аргумента useEffect() , чтобы выполнить запрос один раз после первого рендеринга.

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