Блог

Я получаю ошибку разбора на {movies.Map()}. В нем говорится об ошибке разбора», » ожидается. Также было бы полезно, если бы кто-нибудь сказал мне, есть ли лучший способ назначить тип параметру обратного вызова фильма. То, что я вижу ниже, было предложено моей IDE.

 import {useState} from "react";
import {map} from "react-bootstrap/ElementChildren";
import PosterTag from "./PosterTag";

function MovieTag(genreId = 0, sortBy = "popularity.desc", page = 1) {
    const [movies, setMovies] = useState([]);
    const baseUrl = "https://api.themoviedb.org/3/discover/movie?api_key=My_Key"  
        "amp;language=en-USamp;sort_by=popularity.descamp;include_adult=falseamp;include_video=falseamp;page=1amp;with_watch_monetization_types=flatrate"
    if(genreId === 0) {
        fetch(baseUrl).then(response => {
            return response.json();
        }).then(data => {
            setMovies(data.results);
        });
    }
    return (
        {movies.map((movie: { id: any; poster_path: any; title: any; }) => {
            return (
                <PosterTag key={movie.id}
                           poster={movie.poster_path}
                           title={movie.title}
                />
            );
        })}
    );
}
export default MovieTag
 

В своем компоненте вы возвращаете массив элементов JSX. Компоненты React всегда должны возвращать один элемент JSX.

Вам нужно обернуть свои PosterTag элементы в a div или a React.Fragment , если вам не нужен какой-либо элемент-оболочка.

попробуйте это

 return (
  <React.Fragment>
    {movies.map((movie: { id: any; poster_path: any; title: any; }) => {
        return (
          <PosterTag 
            key={movie.id}
            poster={movie.poster_path}
            title={movie.title}
           />
        );
     })}
   </React.Fragment>
 );
 

Отвечая на ваш второй вопрос, вы можете создать интерфейс для Movie

 interface Movie {
  id: string;
  poster_path: any;
  title: any
}
 

а затем внутри обратного map вызова вы можете сделать это

 movies.map((movie: Movie) => { ... }