Ошибка типа NextJS при передаче реквизита детям

У меня есть файл типов с этими типами:

type IServiceItems = {
  fields: {
    name: string;
    description: string;
    logo: {
      fields: {
        file: {
          url: string;
        };
      };
    };
  };
};

type ITechItems = {
  fields: {
    name: string;
    logo: {
      fields: {
        file: {
          url: string;
        };
      };
    };
  };
};

У меня есть страница, на которой я извлекаю данные с реквизитами SSR. Я пытаюсь передать этот реквизит детям. Но я получаю ошибку типа.

TSX-файл страницы:

interface Props {
  services: IServiceItems[];
  technologies: ITechItems[];
}

const Index = ({ services, technologies }: Props) => {
  return (
    <div>
      <ServicesBlock services={...services} />
      <TechnologiesBlock technologies={...technologies} />
    </div>
  );
};

Ошибка в свойствах сервисов и технологий:

(property) services: IServiceItems[]
Type '{ services: IServiceItems[]; }' is not assignable to type 'IntrinsicAttributes & IServiceItems[]'.
  Property 'services' does not exist on type 'IntrinsicAttributes & IServiceItems[]'.

И, наконец, компонент:

const ServicesBlock = (services: IServiceItems[]) => {}

Я пытался использовать ... при передаче параметров, но не помогло.

Получение данных:

export const getServerSideProps = async () => {
  const services = await contentful.getEntries({ content_type: 'service' });
  const technologies = await contentful.getEntries({ content_type: 'technology' });

  return {
    props: {
      services: services.items,
      technologies: technologies.items,
    },
  };
};

Где звонок getStaticProps? Вы просто пропустили это? Это механизм получения данных.

serraosays 16.05.2022 21:25

Вам нужно изолировать ошибку. Ваша добыча успешна? Попробуйте войти services в page.tsx. У вас также может быть проблема с ТС. Почему ваши интерфейсы называются массивами? Может быть, ваша проверка типа не работает, но выборка работает.

serraosays 17.05.2022 00:48
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
2
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не должны распространять свой массив services при передаче его в качестве реквизита, если вы ожидаете массив (удалите ...):

const Index = ({ services, technologies }: Props) => {
  return (
    <div>
      <ServicesBlock services={services} />
      <TechnologiesBlock technologies={technologies} />
    </div>
  );
};

Кроме того, измените объявление ServicesBlock на следующее:

interface Props {
    services: IServiceItems[];
}

const ServicesBlock = ({ services }: Props) => {}

Другие вопросы по теме