React电影购票网站开发问题：点击购票图标如何传递电影详情

步骤1：点击购票时传递电影信息 #

在movie.jsx里，你需要把当前电影的ID（或完整数据）通过跳转动作传递给购票页面。如果用React Router v6+，两种常用方式如下：

方式一：URL参数传递ID（推荐，支持页面刷新不丢失数据）

修改点击事件和跳转函数，把电影ID拼进路径：

// 假设当前组件有movie变量存储当前电影数据
<p onClick={() => ticketpage(movie.id)}>
  <FaTicket />
</p>

const ticketpage = (movieId) => {
  navigate(`/purchaseticket?movieId=${movieId}`);
};

方式二：通过state传递完整电影数据（无需额外请求接口）

直接把电影对象放进路由state：

<p onClick={() => ticketpage(movie)}>
  <FaTicket />
</p>

const ticketpage = (movie) => {
  navigate('/purchaseticket', { state: { movie } });
};

步骤2：在购票页面接收并渲染电影数据 #

根据你选的传参方式，在purchaseticket.jsx里获取数据并渲染：

若用URL参数传递ID：

导入useSearchParams钩子获取ID，再调用接口拉取电影详情（以TMDB API为例）：

import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

const PurchaseTicket = () => {
  const [searchParams] = useSearchParams();
  const [movie, setMovie] = useState(null);
  const movieId = searchParams.get('movieId');

  useEffect(() => {
    if (movieId) {
      // 替换成你的TMDB API密钥
      fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=你的API_KEY`)
        .then(res => res.json())
        .then(data => setMovie(data))
        .catch(err => console.error(err));
    }
  }, [movieId]);

  if (!movie) return <div>加载中...</div>;

  return (
    <div className=''>
      <div className=''>
        <img 
          className='w-full aspect-auto'
          src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`} 
          alt={movie.title}   
        />
        <h1 className='text-xl font-bold mt-4'>{movie.title}</h1>
        <p className='mt-2 text-gray-600'>{movie.overview}</p>
        {/* 购票功能模块 */}
        <div className='mt-6'>
          <div className='mb-4'>
            <label className='mr-2'>购票数量：</label>
            <select className='border rounded px-2'>
              <option value='1'>1张</option>
              <option value='2'>2张</option>
              <option value='3'>3张</option>
            </select>
          </div>
          <button className='bg-blue-500 text-white px-4 py-2 rounded'>确认购票</button>
        </div>
      </div>
    </div>
  );
};

export default PurchaseTicket;

若用state传递完整数据：

导入useLocation钩子直接读取state里的电影对象：

import { useLocation } from 'react-router-dom';

const PurchaseTicket = () => {
  const location = useLocation();
  const movie = location.state?.movie;

  if (!movie) return <div>未选择电影，请返回选择</div>;

  return (
    <div className=''>
      <div className=''>
        <img 
          className='w-full aspect-auto'
          src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`} 
          alt={movie.title}   
        />
        <h1 className='text-xl font-bold mt-4'>{movie.title}</h1>
        <p className='mt-2 text-gray-600'>{movie.overview}</p>
        {/* 购票功能模块 */}
        <div className='mt-6'>
          <div className='mb-4'>
            <label className='mr-2'>选择场次：</label>
            <select className='border rounded px-2'>
              <option value='10:00'>10:00</option>
              <option value='14:30'>14:30</option>
              <option value='19:00'>19:00</option>
            </select>
          </div>
          <button className='bg-blue-500 text-white px-4 py-2 rounded'>立即支付</button>
        </div>
      </div>
    </div>
  );
};

export default PurchaseTicket;

注意事项 #

• 用state传数据的话，页面刷新后state会丢失，需要支持刷新的场景优先选URL参数+接口请求的方式。
• 确保你的路由配置里已经正确映射/purchaseticket路径到PurchaseTicket组件。

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