В чем ошибка моего интерфейса?

Question

[webjun]

Добрый день, стараюсь разобраться в TS и получаю ошибку в интерфейсе..
Я делаю обычное приложение где получаю инфу через Апи и данные проверяю через интерфейс. Как мне подсказали ранее то чтоб описать такие данные

{
  "page": 1,
  "results": [
    {
      "adult": false,
      "backdrop_path": "/p1F51Lvj3sMopG948F5HsBbl43C.jpg",
      "genre_ids": [28, 12, 14],
      "id": 616037,
      "original_language": "en",
      "original_title": "Thor: Love and Thunder",
      "overview": "After his retirement is interrupted by Gorr the God Butcher, a galactic killer who seeks the extinction of the gods, Thor enlists the help of King Valkyrie, Korg, and ex-girlfriend Jane Foster, who now inexplicably wields Mjolnir as the Mighty Thor. Together they embark upon a harrowing cosmic adventure to uncover the mystery of the God Butcher’s vengeance and stop him before it’s too late.",
      "popularity": 10993.015,
      "poster_path": "/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg",
      "release_date": "2022-07-06",
      "title": "Thor: Love and Thunder",
      "video": false,
      "vote_average": 6.7,
      "vote_count": 1657
    },

мне нужно прописать интерфейс такого типа:

export interface FilmType {
  page: number;
  results: ResultType[];
}

interface ResultType {
  adult: boolean;
  backdrop_path: string;
  genre_ids: Array<number>;
  id: number;
  original_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  release_date: string;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
}

Но когда я начинаю проходить массив мапом то ничего кроме page и results у меня не отображается и выдает ошибку, подозреваю что проблема в описании интерфейса
Пример компонента где я импортирую интерфейс и получаю данные через Апи:

import React from "react";
import "./Home.module.scss";
import { FilmType } from "../../dataTypes";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";

export default function Home() {
  const [popularMovies, setPopularMovies] = React.useState<FilmType[]>([]);

  React.useEffect(() => {
    try {
      fetch(
        "https://api.themoviedb.org/3/movie/popular?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US"
      )
        .then((res) => res.json())
        .then((data) => setPopularMovies(data.results));
    } catch (err) {
      console.warn("Error>>", err);
    }
  }, []);
  console.log(popularMovies);
  return (
    <div className="poster">
      <Carousel
        showThumbs={false}
        autoPlay={true}
        transitionTime={3}
        infiniteLoop={true}
        showStatus={false}
      >
        {popularMovies.map((movie) => (
          <span>{movie.original_title}</span>
        ))}
      </Carousel>
    </div>
  );
}

Answer 1

[Lynn «Кофеман»]

Ну так ты объявил что положишь в popularMovies массив из FilmType, а сам кладёшь массив из ResultType.

Или объяви правильно тип:

const [popularMovies, setPopularMovies] = React.useState<FilmType['results']>([]);

или клади что обещал.

Comments

[webjun]

Да, все верно но если сделать так

const [popularMovies, setPopularMovies] = React.useState<FilmType['results']>([]);

то получаю ошибку с выводом page :

{popularMovies.map((movie) => (
          <span>{movie.page}</span>
        ))}

[Lynn «Кофеман»]

webjun, ну так если тебе нужны оба поля из ответа, то и сохранять нужно оба.
Сейчас значение page ты попросту никуда не сохраняешь.