React项目ListFilm组件的Map渲染列表无法在Home页展示报错求助

已识别问题 #

• Home组件存在冗余导入：无效的import './ListFilm';语句无需保留
• 电影图片无法正常加载：TMDB接口返回的backdrop_path为相对路径，需拼接平台统一的图片基础地址才能正常访问
• 可选优化项：列表渲染的key值优先使用接口返回的唯一资源id替代index，提升虚拟DOM渲染性能；可增加请求错误捕获逻辑避免接口异常导致页面崩溃

修正后代码 #

Home.js #

import './Home.css';
import ListFilm from './ListFilm';

function Home() {
  return (
    <div className="Home">
      <h2>The List of Films</h2>
      <div className="list film">
        <ListFilm/>
      </div>
    </div>
  );
}

export default Home;

ListFilm.js #

import {useState, useEffect} from 'react';
// TMDB图片基础地址，固定前缀
const IMG_BASE_URL = 'https://image.tmdb.org/t/p/original/';

function ListFilm() {
  const [post, setPost] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://api.themoviedb.org/3/movie/now_playing?api_key=9e0de5499870264659308848dbad6b2a"
        );
        const data = await response.json();
        setPost(data);
      } catch (err) {
        console.error('电影数据请求失败：', err)
      }
    };
    fetchData();
  }, []);

  return (
    <>
      {post.results?.map((item) => (
        <div key={item.id}>
          <h3>{item.original_title}</h3>
          <img src={`${IMG_BASE_URL}${item.backdrop_path}`} alt="poster"/>
          <p>Tanggal Rilis: {item.release_date}</p>
        </div>
      ))}
    </>
  );
}

export default ListFilm;

内容的提问来源于stack exchange，提问作者Firsty Ukhti Molyndi