ReactJS求助：API渲染电影列表，点击后模态框仅显示对应影片详情问题

核心问题分析 #

你之前的代码应该是把所有电影的详情都通过map循环渲染进了模态框，导致点击时无法单独显示某一部的内容。要实现需求，核心是通过唯一ID绑定电影项与对应详情，点击时只传递当前选中电影的数据给模态框。

具体实现步骤 #

• 1. 在父组件里维护两个状态：selectedMovie（存储当前选中的电影详情，初始为null）、isModalOpen（控制模态框显示/隐藏，初始为false）。
• 2. 渲染电影列表时，给每个电影项绑定点击事件，点击时将当前电影的完整数据（或ID）赋值给selectedMovie，同时打开模态框。
• 3. 模态框不再循环所有电影，仅渲染selectedMovie中的内容，且只有当selectedMovie不为空时才显示模态框。

示例代码（React场景） #

父组件核心代码

import { useState, useEffect } from 'react';

function MovieList() {
  const [movies, setMovies] = useState([]);
  const [selectedMovie, setSelectedMovie] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 模拟API获取电影列表
  useEffect(() => {
    const fetchMovies = async () => {
      const response = await fetch('你的电影列表API地址');
      const data = await response.json();
      setMovies(data);
    };
    fetchMovies();
  }, []);

  // 点击电影项触发的函数
  const handleMovieClick = (movie) => {
    // 直接传递当前电影数据，若需二次请求详情API，可在这里用movie.id调用接口
    setSelectedMovie(movie);
    setIsModalOpen(true);
  };

  return (
    <div className="movie-container">
      {/* 电影列表 */}
      <div className="movie-list">
        {movies.map(movie => (
          <div 
            key={movie.id} 
            className="movie-card"
            onClick={() => handleMovieClick(movie)}
          >
            <img src={movie.poster} alt={movie.title} />
            <h3>{movie.title}</h3>
          </div>
        ))}
      </div>

      {/* 模态框 */}
      {isModalOpen && selectedMovie && (
        <div className="modal-overlay">
          <div className="modal-content">
            <button onClick={() => setIsModalOpen(false)}>关闭</button>
            <h2>{selectedMovie.title}</h2>
            <p>上映日期：{selectedMovie.releaseDate}</p>
            <p>剧情简介：{selectedMovie.description}</p>
            <p>评分：{selectedMovie.rating}</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default MovieList;

关键注意事项 #

• 电影列表的每个项必须用movie.id作为key，保证React能正确识别唯一列表项。
• 模态框只渲染selectedMovie的数据，避免循环所有电影的错误逻辑。
• 如果需要通过ID单独请求详情接口，可在handleMovieClick中用movie.id发起请求，再将返回的详情数据赋值给selectedMovie。

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