в браузере отправляю запрос на localhost:3000
useEffect(() => {
document.title = 'Eurosell - online store | Best Choice';
let params = new URLSearchParams(window.location.search);
let categories = params.get("category");
let subcategories = params.get("subcategory");
let pageNumber = params.get("pageNumber");
(async () => {
try {
await fetchProducts(categories, subcategories, pageNumber);
} catch (error) {
console.error("Error in useEffect:", error);
}
})();
}, []);
const fetchProducts = async (category, subcategory, pageNumber) => {
const queryParams = new URLSearchParams({
...category && { categories: category },
...subcategory && { subcategories: subcategory },
pageNumber: pageNumber || '1'
});
const url = `${BASE_URL}/api/products?${queryParams.toString()}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch products: ${response.statusText}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching products:", error);
return null;
}
}
Привет! Кажется, запрос на бэкенд делается дважды из-за эффекта useEffect в вашем коде. Этот эффект вызывается при монтировании компонента и снова при любом изменении зависимостей (в данном случае зависимостей нет, поэтому он вызывается только один раз при монтировании). Ваш код содержит fetchProducts внутри этого эффекта, поэтому он выполняется каждый раз при монтировании компонента. Если вы хотите, чтобы fetchProducts вызывался только один раз при монтировании компонента, вы можете изменить зависимости внутри useEffect. Вместо пустого массива вы можете передать конкретные значения, при изменении которых будет вызываться эффект. Например, если вы хотите, чтобы fetchProducts вызывался только при изменении параметров страницы, вы можете изменить useEffect следующим образом: useEffect(() => { // Ваш текущий код здесь }, [pageNumber, categories, subcategories]); Теперь fetchProducts будет вызываться только тогда, когда номер страницы, категории или подкатегории изменятся. Я надеюсь, это поможет вам решить проблему с двойным запросом на бэкенд. Если у вас возникнут еще вопросы, не стесняйтесь задавать!
Обсуждают сегодня