как получить данные из бека

главный компонент с этим кодом данные приходят но не работает сам сайт

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 |                 }


Ответы (0 шт):