Map() 多次返回数组项 - React

Question

我是 React 的新手，我正在尝试获取一个包含对象数组的 json（由 API REST 发送）

这是我从 API 获取的 json

{
    "data": [
        {
            "id_pelicula": 1,
            "Nombre_pelicula": "Nocturnal Animals",
            "anio_estreno": "2016",
            "url_poster": "https://cdn.abicart.com/shop/16575/art75/h2859/177222859-origpic-9d7682.jpg"
        },
        {
            "id_pelicula": 2,
            "Nombre_pelicula": "Prisoners",
            "anio_estreno": "2013",
            "url_poster": "https://m.media-amazon.com/images/M/MV5BMTg0NTIzMjQ1NV5BMl5BanBnXkFtZTcwNDc3MzM5OQ@@._V1_.jpg"
        }
    ]
}

这是我的组件的代码：

import { Link } from "react-router-dom";
import axios from "axios";
import { useCallback, useEffect, useState } from "react";

export const PeliCard = () => {
  const [peliculas, setPeliculas] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8080/getPeliculas").then((response) => {
      console.log(response.data);
      setPeliculas(response.data.data);
    });
  }, []);

  return (
    <div className="col animate__animated animate__fadeIn">
      <div className="col-4">
        {peliculas.map((pelicula, index) => (
          <img key={index} src={pelicula.url_poster} className="card-img" />
        ))}
      </div>
    </div>
  );
};

当我运行应用程序时，它多次显示数组的元素，而它只应显示 2 个元素。

我该如何解决？提前致谢

Answer 1

这和react没有关系，如果你不尝试它

className="col animate__animated animate__fadeIn"

你会看到只有两个图像

<div>
  <div>
    {peliculas.map((pelicula, index) => (
      <img key={index} src={pelicula.url_poster} className="card-img" />
    ))}
  </div>
</div>;

我不知道动画风格但我认为

animate__animated animate__fadeIn

就是为了这样做