React JS开发Netflix克隆：海报点击切换预告片功能失效

问题说明 #

• 需求：点击电影海报显示对应预告片，再次点击同一海报隐藏预告片
• 当前问题：首次点击可正常显示预告片，但再次点击无法隐藏

问题分析 #

你的代码存在以下逻辑问题：

1. setShowTrailer参数错误：该状态为布尔类型，但你传入的是handleMovieTrailer(obj.id)的调用结果或null，而非布尔值，导致状态更新不符合预期
2. 未跟踪当前显示预告片的电影ID：无法判断再次点击的是否是同一海报，无法触发隐藏逻辑
3. urlId状态未与隐藏动作绑定：仅靠urlId && <YouTube/>的判断，隐藏时未清空urlId，导致组件可能仍会渲染

解决方案 #

1. 调整状态管理 #

新增状态跟踪当前选中的电影ID和预告片URL信息，确保状态逻辑清晰：

const [showTrailer, setShowTrailer] = useState(false);
const [selectedTrailer, setSelectedTrailer] = useState(null);
const [currentMovieId, setCurrentMovieId] = useState(null);

2. 修改预告片获取函数 #

更新handleMovieTrailer，确保获取到预告片后同步更新状态：

const handleMovieTrailer = async (movieId) => {
  // 替换为你的TMDB API调用逻辑
  const res = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=你的API密钥`);
  const data = await res.json();
  const trailer = data.results.find(vid => vid.type === 'Trailer' && vid.site === 'YouTube');
  
  if (trailer) {
    setSelectedTrailer(trailer);
    setShowTrailer(true);
    setCurrentMovieId(movieId);
  } else {
    // 无预告片时重置状态
    setShowTrailer(false);
    setSelectedTrailer(null);
    setCurrentMovieId(null);
  }
};

3. 修正海报点击逻辑 #

点击海报时判断当前状态，分情况处理显示/隐藏：

<img 
  onClick={() => {
    // 再次点击同一海报，隐藏预告片
    if (showTrailer && currentMovieId === obj.id) {
      setShowTrailer(false);
      setSelectedTrailer(null);
      setCurrentMovieId(null);
    } else {
      // 点击新海报或未显示时，加载预告片
      handleMovieTrailer(obj.id);
    }
  }}
  className={props.isSmall ? 'post_small' : 'Poster'} 
  src={`${imageURL + obj.poster_path}`} 
  alt="Movie Poster" 
/>

4. 调整YouTube组件渲染条件 #

结合showTrailer和selectedTrailer状态，确保隐藏时组件正确卸载：

{showTrailer && selectedTrailer && (
  <YouTube videoId={selectedTrailer.key} opts={opts} />
)}

修改后核心逻辑说明 #

• 通过currentMovieId判断点击的是否是当前显示预告片的海报，实现精准的显示/隐藏切换
• 所有状态（显示状态、预告片信息、当前电影ID）同步更新，避免状态不一致
• 严格保证showTrailer为布尔类型，符合React状态管理的规范

内容的提问来源于stack exchange，提问作者Aniz Bin Nowshad