获取特定电影的流派列表时出错-MovieDB API-React

Question

我正在尝试获得一部特定电影的所有类型，但我没有成功。我可以列出所有电影和其他信息，但是，我无法显示来自数组的类型列表。有人能帮我吗？

这是API中返回流派的部分：

{
"adult":false,
"backdrop_path":"/3TsnQdMvxdfgLkWqwQYeILBCbbx.jpg",
"belongs_to_collection":{
"id":760193,
"name":"Orphan Collection",
"poster_path":"/q8icPVro0MYLTXbttS1KMpdQntP.jpg",
"backdrop_path":"/nsslKmD5WIYhJ0fO5MDeE6ZjIKp.jpg"
},
"budget":0,
"genres":[
{
"id":27,
"name":"Horror"
},
{
"id":53,
"name":"Thriller"
}
]
}

API调用：

getMovieGenres: async (id: string) => {
const response =
await require(`/movie/${id}?api_key=${key}&language=pt-BR`);
return response.data;
},

打字：

export type GenresType = {
id: number;
name: string;
};

电影详情页：

import { useEffect, useState } from "react";
import { parsePath, useParams } from "react-router-dom";
import { api } from "../../api";
import { MovieDataType, GenresType } from "../../types/MovieDataType";
import style from "./style.module.css";
export const Movie = () => {
const [movie, setMovie] = useState<MovieDataType>();
const [genresList, setGenresList] = useState<GenresType[]>([]);
const params = useParams();
const loadDataMovie = async (id: string) => {
const movieData = await api.getMovie(id);
setMovie(movieData);
};
const loadGenres = async (id: string) => {
const genre = await api.getMovieGenres(id);
setGenresList(genre);
};
useEffect(() => {
if (params.id) {
loadDataMovie(params.id);
loadGenres(params.id);
}
}, []);
const imgPath = "https://image.tmdb.org/t/p/w1280/";
const imgPoster = "https://image.tmdb.org/t/p/w500/";
return (
<>
<div className={style.headerMovie}>
<div
style={{
backgroundImage: `url('${imgPath}/${movie?.backdrop_path}')`,
}}
className={style.bg}
></div>
<div className={style.content}>
<img src={`${imgPoster}/${movie?.poster_path}`} alt="" />
</div>
<p>
<>
{genresList.map((item) => {
<p>{item.name}</p>;
})}
</>
</p>
</div>
</>
);
};

Answer 1

genresList实际上是一个对象，而不是一个列表。

genresList.genres是要迭代的数组。

所以这个

<p>
<>
{genresList.map((item) => {
<p>{item.name}</p>;
})}
</>
</p>

应该成为

<p>
<>
{genresList.genres.map((item) => {
<p>{item.name}</p>;
})}
</>
</p>