Как верно типизировать стейт?

Question

[webjun]

Приветсвую, мои траблы с тайпскриптом продолжаются, вероятно ошибка в типизации стейта..
Вот данные которые я должен получать

{
  "adult": false,
  "backdrop_path": "/p1F51Lvj3sMopG948F5HsBbl43C.jpg",
  "belongs_to_collection": {
    "id": 131296,
    "name": "Thor Collection",
    "poster_path": "/yw7gr7DhHHVTLlO8Se8uH17TDMA.jpg",
    "backdrop_path": "/3KL8UNKFWgIKXzLHjwY0uwgjzYl.jpg"
  },
  "budget": 250000000,
  "genres": [
    { "id": 28, "name": "Action" },
    { "id": 12, "name": "Adventure" },
    { "id": 14, "name": "Fantasy" }
  ],
  "homepage": "https://www.marvel.com/movies/thor-love-and-thunder",
  "id": 616037,
  "imdb_id": "tt10648342",
  "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 "
  "popularity": 10909.273,
  "poster_path": "/pIkRyD18kl4FhoCNQuWxWu5cBLM.jpg",
  "production_companies": [
    {
      "id": 420,
      "logo_path": "/hUzeosd33nzE5MCNsZxCGEKTXaQ.png",
      "name": "Marvel Studios",
      "origin_country": "US"
    },
    {
      "id": 176762,
      "logo_path": null,
      "name": "Kevin Feige Productions",
      "origin_country": "US"
    }
  ],
  "production_countries": [
    { "iso_3166_1": "US", "name": "United States of America" }
  ],
  "release_date": "2022-07-06",
  "revenue": 698864051,
  "runtime": 119,
  "spoken_languages": [
    { "english_name": "English", "iso_639_1": "en", "name": "English" }
  ],
  "status": "Released",
  "tagline": "The one is not the only.",
  "title": "Thor: Love and Thunder",
  "video": false,
  "vote_average": 6.768,
  "vote_count": 1740
}

Таким образом я их описал:

export interface MovieInfo {
  adult: boolean;
  backdrop_path: string;
  belongs_to_collection: BelToCol;
  budget: number;
  genres: Genres[];
  homepage: string;
  id: number;
  imdb_id: string;
  orignal_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  production_companies: ProdCompany[];
  production_countries: ProdCountries[];
  release_date: string;
  revenue: number;
  runtime: number;
  spoken_languages: SpokenLan[];
  status: string;
  tagline: string;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
}
interface BelToCol {
  id: number;
  name: string;
  poster_path: string;
  backdrop_path: string;
}
interface Genres {
  id: number;
  name: string;
}
interface ProdCompany {
  id: number;
  logo_path: string;
  name: string;
  origin_country: string;
}
interface ProdCountries {
  iso_3166_1: string;
  name: string;
}
interface SpokenLan {
  english_name: string;
  iso_639_1: string;
  name: string;
}

Вот мой компонент вскотором делаю гет запрос и хочу вывести данные:

import React from "react";
import "./Movie.scss";
import { useParams } from "react-router-dom";
import { MovieInfo } from "../../dataTypes";

export default function Movie() {
  const [currentMovieDetail, setMovieDetail] = React.useState<MovieInfo[]>([]);
  const { id } = useParams();
  React.useEffect(() => {
    getData();
    window.scrollTo(0, 0);
  }, []);

  const getData = (): void => {
    fetch(
      `https://api.themoviedb.org/3/movie/616037?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US`
    )
      .then((res) => res.json())
      .then((data) => setMovieDetail(data));
    console.log(currentMovieDetail);
  };
  return (
    <div className="movie">
      <h1>{currentMovieDetail.id}</h1>
    </div>
  );
}

В теге h1 подсвечивается ошибка ="Property 'id' does not exist on type 'MovieInfo[]'"
Делаю вывод что ошибка в этой строке: const [currentMovieDetail, setMovieDetail] = React.useState([]);

Comments

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

React.useState<MovieInfo[]>([])
И зачем тут массив?

Может уже научится дебажить такие тривиальные вещи?

[webjun]

Lynn «Кофеман», только разбираюсь в сути, по тем урокам которые я проходил почему-то везде взаимодейтсвовали с массивом..

Answer 1

[Александр]

Так описали же массив MovieInfo[] (все равно что Arrray<MovieInfo>), а получаете один объект.
Можно так сделать:
React.useState<MovieInfo | null>(null);
и в return'е так:
<h1>{currentMovieDetail?.id}</h1>

Comments

[webjun]

Благодарю, буду разбираться..