React中点击事件如何动态获取电影卡片数据并展示到弹出层组件

方案1：基于Redux实现（推荐，适配你现有技术栈） #

步骤1：扩展Redux的电影状态 #

你需要在allMovies的状态中新增selectedMovie字段，用来存储当前选中要购票的电影数据，同时新增两个对应action：

• 设置选中电影的action：setSelectedMovie(movieData)
• 清空选中电影的action：clearSelectedMovie()

对应的reducer逻辑参考：

const initialState = {
  movies: [],
  selectedMovie: null // 新增存储选中电影的字段
}

const movieReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_SELECTED_MOVIE':
      return {...state, selectedMovie: action.payload}
    case 'CLEAR_SELECTED_MOVIE':
      return {...state, selectedMovie: null}
    // 原有其他逻辑保持不变
    default: return state
  }
}

步骤2：修改单电影卡片组件，点击时传递当前电影数据 #

把当前卡片的电影数据作为参数传给toggleHandler即可：

// 原有代码 <button onClick={() => toggleHandler()}>Buy Ticket</button>
// 修改为下方代码，把当前卡片需要的字段全部传入
<button onClick={() => toggleHandler({id, title, poster_path, overview})}>购票</button>

步骤3：修改父组件的toggleHandler逻辑 #

在父组件中引入dispatch，收到电影数据后触发Redux的setSelectedMovie action，同时控制弹出层显隐：

import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { setSelectedMovie, clearSelectedMovie } from '你对应的action文件路径'

const 父组件 = () => {
  const [showPopUp, setShowPopUp] = useState(false)
  const dispatch = useDispatch()

  const toggleHandler = (movieData) => {
    // 传入了电影数据说明是打开弹出层，存储选中的电影
    if(movieData) {
      dispatch(setSelectedMovie(movieData))
      setShowPopUp(true)
    } else {
      // 没有传参说明是关闭弹出层，清空选中的电影
      dispatch(clearSelectedMovie())
      setShowPopUp(false)
    }
  }
  // 其余父组件逻辑保持不变
}

步骤4：修改弹出层组件，渲染选中的电影数据 #

不用拉取整个电影列表，直接从Redux取selectedMovie字段渲染即可：

const PopUpMovie = ({showClass, toggleHandler}) => {
  const selectedMovie = useSelector((state)=> state.allMovies.selectedMovie);
  // 加保护逻辑，没有选中电影时不渲染弹出层内容
  if(!selectedMovie) return null
  return (
    <div className={`pop-up-container ${showClass}`}>
       <nav className="pop-up">
           <GrClose className="pop-up-close" onClick={()=> toggleHandler()}/>
           <div className="product-details">
               <div className="img-container">
                   {/* 替换硬编码的图片地址 */}
                   <img src={`${ImgPath}${selectedMovie.poster_path}`} alt={selectedMovie.title} />
               </div>
               <div className="product info">
                   {/* 替换硬编码的标题 */}
                   <h1 className="title">{selectedMovie.title}</h1>
                   <div className="quantity">
                       <h4>购票数量</h4>
                       <span>4</span>
                   </div>
                   <h5 className="prix">11$</h5>
                   <button className="btn-checkout">继续结算</button> 
               </div>
           </div>
       </nav>
    </div>
  )
}

方案2：父组件状态实现（无需修改Redux，适合小项目） #

如果不想修改Redux逻辑，也可以直接用父组件状态存储选中数据：

• 父组件新增selectedMovie状态，初始为null
• 点击购票时把电影数据存在父组件的selectedMovie中
• 把selectedMovie作为props传给PopUpMovie组件渲染即可，逻辑和上面方案一致，只是把存储位置从Redux换成了父组件state。

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