как получить данные из бека
главный компонент с этим кодом данные приходят но не работает сам сайт
import { IAssetsService, ISingleAssetsService } from "common/types/service";
import React, { useEffect, useState } from "react";
import { getService } from "store/thunks/service";
import { useAppDispatch } from "utils/hook";
const MenuService = () => {
const [serviceData, setServiceData] = useState<IAssetsService[]>([]);
const dispatch = useAppDispatch();
useEffect(() => {
const fetchData = async () => {
try {
const response = await dispatch(getService());
if (response.payload && Array.isArray(response.payload.services)) {
setServiceData(response.payload.services);
console.log(response.payload.services);
} else {
console.error("Полезная нагрузка ответа не имеет ожидаемого формата");
}
} catch (error) {
console.error("Ошибка при получении сервиса:", error);
}
};
fetchData(); // Инициализация данных
const intervalId = setInterval(() => {
fetchData(); // Повторный запрос данных
}, 60000); // Запрос каждую минуту
return () => clearInterval(intervalId); // Очистка интервала при размонтировании компонента
}, [dispatch]);
return (
<>
<Typography variant='h3'>Menu Service</Typography>
<ul>
{serviceData.map(service => (
<li key={service.url}>
<Typography variant='body1'>{service.name}</Typography>
<Typography variant='body2'>{service.description}</Typography>
<Typography variant='body2'>{service.price}</Typography>
</li>
))}
</ul>
</>
);
}
export default MenuService;
интерфейс
name: string;
description: string;
price: number;
url: string;
}
export interface ISingleAssetsService {
service: IAssetsService[];
}
данные которые мы получаем
"services": [
{
"name": "Размещение сайтов в сети интернет",
"description": "Хостинг - сдача в аренду пользователю части серверного пространства, поддержка работоспособности пользовательского сайта на своих веб-серверах.",
"price": 350,
"url": "host"
},
{
"name": "Регистрация доменов",
"description": "Домены второго уровня выдаются предприятиям и частным лицам в аренду, как правило, с ежегодной оплатой. Домен второго уровня, также как и любого другого, должен состоять из цифр и букв латинского алфавита, например varnoff.com, servernaya.ru, 163.su.",
"price": 500,
"url": "domen"
},
{
"name": "Аренда VDS/VPS",
"description": "Виртуальный выделенный сервер VDS/VPS является полным аналогом физического сервера, но наряду с этим имеет все преимущества традиционного виртуального хостинга.",
"price": 400,
"url": "rent-vps"
},
{
"name": "SSL-сертификаты на сайт",
"description": "это уникальная цифровая подпись сайта, обеспечивающая конфиденциальность и целостность информации при ее передаче. Сертификат подтверждает подлинность сайта и шифрует передачу данных, обеспечивая их сохранность и делая невозможным их перехват.",
"price": 3300,
"url": "ssl"
},
{
"name": "Продвижение сайтов",
"description": "Услуга «Продвижение сайтов» поможет не только повысить позиции в поисковой системе, но и получить желаемую прибыль от нового потока посетителей.",
"price": 5000,
"url": "promotion"
},
{
"name": "Аренда или размещение серверов",
"description": "предлагает свои услуги по размещению (Collocation) и аренде (Dedicated) физических серверов в Самаре. Используя выделенный сервер, Вы получаете независимость от программно-аппаратного обеспечения, которое использует хостинг-провайдер;.",
"price": 100,
"url": "rent-server"
},
{
"name": "Создание сайтов",
"description": "Если Вам нужно создать сайт, который вызовет зависть у конкурентов, то Вы зашли по правильному адресу. Наша компания Варнофф создаёт только качественные сайты, с грамотной структурой и приятным дизайном.",
"price": 40000,
"url": "create-sites"
}
]
}
а с этим кодом все работает и приходит данные но только на одно обновлление
import { IAssetsService } from "common/types/service";
import React, { useEffect, useState } from "react";
import { getService } from "store/thunks/service";
import { useAppDispatch } from "utils/hook";
const MenuService = () => {
const [serviceData, setServiceData] = useState<IAssetsService[]>([]);
const dispatch = useAppDispatch();
useEffect(() => {
const fetchData = async () => {
try {
const response = await dispatch(getService());
if (response.payload && Array.isArray(response.payload) && response.payload.length > 0 && Array.isArray(response.payload[0].service)) {
setServiceData(response.payload[0].service as IAssetsService[]);
console.log(response.payload[0].service); // Проверьте данные о сервисах в консоли
} else {
console.error("Response payload is not in the expected format");
}
} catch (error) {
console.error("Error fetching service data:", error);
}
};
fetchData();
}, [dispatch]);
return (
<>
<Typography variant='h3'>Menu Service</Typography>
<ul>
{serviceData.map(service => (
<li key={service.url}>
<Typography variant='body1'>{service.name}</Typography>
<Typography variant='body2'>{service.description}</Typography>
<Typography variant='body2'>{service.price}</Typography>
</li>
))}
</ul>
</>
);
}
export default MenuService;
ошибки
TS2339: Property 'services' does not exist on type 'string | ISingleAssetsService[]'.
Property 'services' does not exist on type 'string'.
13 | try {
14 | const response = await dispatch(getService());
> 15 | if (response.payload && Array.isArray(response.payload.services)) {
| ^^^^^^^^
16 | setServiceData(response.payload.services);
17 | console.log(response.payload.services);
18 | } else {
ERROR in src/common/moks/navigate-service/index.tsx:16:53
TS2339: Property 'services' does not exist on type 'string | ISingleAssetsService[]'.
Property 'services' does not exist on type 'string'.
14 | const response = await dispatch(getService());
15 | if (response.payload && Array.isArray(response.payload.services)) {
> 16 | setServiceData(response.payload.services);
| ^^^^^^^^
17 | console.log(response.payload.services);
18 | } else {
19 | console.error("Полезная нагрузка ответа не имеет ожидаемого формата");
ERROR in src/common/moks/navigate-service/index.tsx:17:50
TS2339: Property 'services' does not exist on type 'string | ISingleAssetsService[]'.
Property 'services' does not exist on type 'string'.
15 | if (response.payload && Array.isArray(response.payload.services)) {
16 | setServiceData(response.payload.services);
> 17 | console.log(response.payload.services);
| ^^^^^^^^
18 | } else {
19 | console.error("Полезная нагрузка ответа не имеет ожидаемого формата");
20 | }