如何在MERN栈的预约确认页面展示预订详情？

常见排查方向及修复步骤 #

1. 表单提交后的数据传递逻辑优化 #

提交表单后必须把预订数据传递到确认页，推荐两种实用方式：

• React Router 路由传参
  在Form组件的提交函数里，跳转时携带完整预订数据：

  import { useNavigate } from 'react-router-dom';
  
  const Form = () => {
    const navigate = useNavigate();
    const [formData, setFormData] = useState({/* 表单字段 */});
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      // 提交数据到后端
      const res = await fetch('/api/bookings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      const savedBooking = await res.json();
      // 跳转确认页并携带数据
      navigate('/confirm', { state: { booking: savedBooking } });
    };
  };
  

  然后在ConfirmBooking组件中读取传递的数据：

  import { useLocation } from 'react-router-dom';
  
  const ConfirmBooking = () => {
    const location = useLocation();
    const booking = location.state?.booking;
  
    if (!booking) {
      return <div>找不到预订信息，请重新提交</div>;
    }
  
    return (
      <div>
        <h2>预订确认</h2>
        <p><strong>姓名：</strong>{booking.name}</p>
        <p><strong>预约时间：</strong>{new Date(booking.time).toLocaleString()}</p>
        {/* 渲染其他预订字段 */}
      </div>
    );
  };
  

• 全局状态存储（Context）
  先创建全局上下文：

  // BookingContext.js
  import { createContext, useContext, useState } from 'react';
  
  const BookingContext = createContext();
  
  export const BookingProvider = ({ children }) => {
    const [currentBooking, setCurrentBooking] = useState(null);
    return (
      <BookingContext.Provider value={{ currentBooking, setCurrentBooking }}>
        {children}
      </BookingContext.Provider>
    );
  };
  
  export const useBooking = () => useContext(BookingContext);
  

  Form组件提交后更新全局状态：

  const { setCurrentBooking } = useBooking();
  
  const handleSubmit = async (e) => {
    // ...提交逻辑
    const savedBooking = await res.json();
    setCurrentBooking(savedBooking);
    navigate('/confirm');
  };
  

  ConfirmBooking组件直接读取全局状态：

  const { currentBooking } = useBooking();
  
  if (!currentBooking) {
    return <div>暂无预订信息</div>;
  }
  // 渲染预订详情
  

2. 验证后端API返回数据 #

打开浏览器开发者工具的Network标签，查看POST请求的Response，确认后端返回的是包含所有需要展示字段的完整预订记录，避免因返回数据缺失导致确认页无法渲染。

3. 修复确认页渲染逻辑 #

• 必须添加空值判断，防止未初始化数据报错，比如使用booking?.name语法，或先判断booking是否存在再渲染
• 如果通过URL参数传递预订ID，需处理异步加载状态：

  import { useParams } from 'react-router-dom';
  import { useState, useEffect } from 'react';
  
  const ConfirmBooking = () => {
    const [booking, setBooking] = useState(null);
    const [loading, setLoading] = useState(true);
    const { id } = useParams();
  
    useEffect(() => {
      const fetchBooking = async () => {
        const res = await fetch(`/api/bookings/${id}`);
        const data = await res.json();
        setBooking(data);
        setLoading(false);
      };
      fetchBooking();
    }, [id]);
  
    if (loading) return <div>加载中...</div>;
    if (!booking) return <div>该预订不存在</div>;
  
    // 渲染详情
  };
  

4. 检查路由配置 #

确保React Router路由配置正确，确认页路由未拦截参数：

// App.js
import { Routes, Route } from 'react-router-dom';
import Form from './components/Form';
import ConfirmBooking from './components/ConfirmBooking';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Form />} />
      <Route path="/confirm" element={<ConfirmBooking />} />
      {/* 若用ID传参，路由改为 /confirm/:id */}
    </Routes>
  );
}

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