Почему зависает react приложение?

Question

[Никита]

Здравствуйте, есть проект:
Фронтенд - React.js, бэк - node.js
Данные хранятся в mysql
Весь проект запущен локально

Есть 3 страницы:

Код страницы 1

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom/dist';
import { useHttp } from '../../hooks/http.hook';
import axios from 'axios';
import './styleSale.scss';

import { PUBLIC_PROJECT_URL_ROUTE } from '../../Utils/_const.routes';

//Utils
import ScrollToTop from '../../Utils/scrollToTop/ScrollToTop';

import { Navbar } from '../../Components/navbar/Navbar';
import { Footer } from '../../Components/footer/Footer';

const Sale = () => {
const { request, err, clearErr } = useHttp();
const [dataProject, setDataProject] = useState([]);
const url = useLocation();
const status = 'Show';
const kindProperty = 'Sale';

useEffect(() => {
console.log(url);
request('/api/admin/dash', 'POST', { url });
}, []);

useEffect(() => {
axios
.post('/api/getPropertySale', { status, kindProperty })
.then(response => {
setDataProject(response.data);
console.log(response.data);
});
}, []);

return (
<>





{dataProject.map(project => (







{project.name}

{project.shortDescription}



AED{' '}
{project.price
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}


href={`${PUBLIC_PROJECT_URL_ROUTE}/${project.id}`}
className='button'
>
View Details





))}




>
);
};
export default Sale;

Код страницы 2

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom/dist';
import { useHttp } from '../../hooks/http.hook';
import axios from 'axios';
import './styleOffPlan.scss';

import { PUBLIC_PROJECT_URL_ROUTE } from '../../Utils/_const.routes';

//Utils
import ScrollToTop from '../../Utils/scrollToTop/ScrollToTop';

import { Navbar } from '../../Components/navbar/Navbar';
import { Footer } from '../../Components/footer/Footer';

const OffPlan = () => {
const { request, err, clearErr } = useHttp();
const [dataProject, setDataProject] = useState([]);
const url = useLocation();
const status = 'Show';
const kindProperty = 'Off-Plane';

useEffect(() => {
console.log(url);
request('/api/admin/dash', 'POST', { url });
}, []);

useEffect(() => {
axios
.post('/api/getPropertyOff-plane', { status, kindProperty })
.then(response => {
setDataProject(response.data);
console.log(response.data);
});
}, []);

return (
<>





{dataProject.map(project => (







{project.name}

{project.shortDescription}



AED{' '}
{project.price
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}


href={`${PUBLIC_PROJECT_URL_ROUTE}/${project.id}`}
className='button'
>
View Details





))}




>
);
};
export default OffPlan;

Код страницы 3

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom/dist';
import { useHttp } from '../../hooks/http.hook';
import axios from 'axios';
import './styleRent.scss';

import { PUBLIC_PROJECT_URL_ROUTE } from '../../Utils/_const.routes';

//Utils
import ScrollToTop from '../../Utils/scrollToTop/ScrollToTop';

import { Navbar } from '../../Components/navbar/Navbar';
import { Footer } from '../../Components/footer/Footer';

const Rent = () => {
	const { request, err, clearErr } = useHttp();
	const [dataProject, setDataProject] = useState([]);
	const url = useLocation();
	const status = 'Show';
	const kindProperty = 'Rent';

	useEffect(() => {
		console.log(url);
		request('/api/admin/dash', 'POST', { url });
	}, []);

	useEffect(() => {
		axios
			.post('/api/getPropertyRent', { status, kindProperty })
			.then(response => {
				setDataProject(response.data);
				console.log(response.data);
			});
	}, []);

	return (
		<>
			<ScrollToTop />
			<Navbar />
			<div className='wrap'>
				<div className='sale_container'>
					<div className='grid-container'>
						{dataProject.map(project => (
							<div className='grid-child' key={project.id}>
								<div className='slide s-1'>
									<div className='img'>
										<img src={project.photo.split(';')[0]} alt='' />
									</div>
									<div className='text-container'>
										<h4 className='tittle'>
											<b>{project.name}</b>
										</h4>
										<p className='paragraph'>{project.shortDescription}</p>
										<div className='container'>
											<p className='price'>
												<b>
													AED{' '}
													{project.price
														.toString()
														.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
												</b>
											</p>
											<a
												href={`${PUBLIC_PROJECT_URL_ROUTE}/${project.id}`}
												className='button'
											>
												View Details
											</a>
										</div>
									</div>
								</div>
							</div>
						))}
					</div>
				</div>
			</div>
			<Footer />
		</>
	);
};
export default Rent;

Суть проблемы когда часто переходишь между страницами ( например стр1-> стр2->стр3->стр2->стр3->), то в какой-то момент то ли сервер зависает, то ли react. Ошибку ни сервер, ни react не выдают! Просто перестает отображаться все, что находится в grid-container, как я понял потому, что

const [dataProject, setDataProject] = useState([]);

стейт пустой. Но вот вопрос почему node.js перестает отдавать данные?

Api Server

const { Property } = require('../../models/property/property');

const getAllProperty = async (req, res) => {
	const { status, kindProperty } = req.body;
	try {
		await Property.findAll({
			where: { status: status, kindProperty: kindProperty },
		}).then(property => {
			res.json(property);
		});
	} catch (error) {
		res.status(500).json({ message: 'Something went wrong, please try again' });
	}
};

module.exports = getAllProperty;

Скрины что ощибок нет

Comments

[szQocks]

ну так у тебя ошибка на фронте то есть, консоль то глянь свою, вон пишет про AboutContent4 , бэк то раздает приложение раз ты видишь хотя бы хэдер и футер