React中Map循环渲染数组元素重复显示问题求助

排查步骤与解决方案 #

1. 确认API返回数据是否重复
   查看浏览器控制台中console.log(response.data.data)的输出，确认数组长度是否为2。如果API返回了重复数据，需要后端修复接口；如果数据正常，继续下一步。

2. 检查组件是否被多次调用
   查看父组件代码，确认<PeliCard />是否被多次渲染。如果父组件中多次引入该组件，每个实例都会发起请求并渲染2张图片，导致视觉上的重复。确保只调用一次该组件。

3. 修复Bootstrap布局结构
   你的组件布局不符合Bootstrap栅格系统规范，外层的col直接嵌套col-4会导致布局混乱，可能让你误以为元素重复。正确的结构应该用row包裹列：

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

4. 使用唯一key替代index
   避免用数组index作为key，改用每个电影唯一的id_pelicula，这能保证React正确识别列表项，避免因列表变动导致的渲染异常。

修改后的完整组件代码 #

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

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

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

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

内容的提问来源于stack exchange，提问作者Pedro Castro