本文介绍一种可靠、可维护的方案：放弃依赖 `postmessage` 跨页通信，改由 react 在结果页主动读取 `localstorage` 并调用 api 获取最新搜索数据，彻底规避消息时序错乱与旧数据残留问题。
在 WordPress 多页场景中（如 front-page.php → results-page.php），初学者常尝试用 window.postMessage 从传统 PHP 页面向嵌入的 React 应用（如 App.js）传递搜索数据。但该方式极易因页面生命周期、事件监听注册时机、缓存复用等问题导致接收到上一次搜索的旧数据——正如你所遇到的：flightCardsDataArray 在 FrontPage.js 中已正确写入 localStorage 并触发 postMessage，但 App.js 的监听器却捕获到陈旧数据。
根本原因在于：postMessage 是异步广播机制，而 React 组件（尤其是函数组件配合 useEffect）可能在新页面加载完成前就完成了监听器绑定；若前一次消息尚未被消费或存在多个监听器残留，就会造成数据错位。更关键的是，WordPress 页面跳转本质是全量重载，React 应用每次都在新上下文中初始化，无法保证与上一页面的 postMessage 严格同步。
✅ 推荐解法：将数据获取逻辑完全收归 React 层，利用 localStorage 作为轻量参数桥接，而非数据载体。
具体实施步骤如下：
-
前端跳转保持简洁
front-page.php 中点击搜索按钮后，仅跳转至结果页（如 /results/），并将必要搜索参数（如出发地、目的地、日期）存入 localStorage：// FrontPage.js document.getElementById('search-btn').addEventListener('click', () => { const searchParams = { origin: document.getElementById('origin').value, destination: document.getElementById('destination').value, date: document.getElementById('date').value }; localStorage.setItem('searchParams', JSON.stringify(searchParams)); window.location.href = '/results/'; }); -
React 应用在结果页自主拉取最新数据
在 App.js（或 CreateApp 组件）中，使用 useEffect + useState 在挂载时读取参数并发起 API 请求：import React, { useState, useEffect } from 'react'; import axios from 'axios'; const CreateApp = () => { const [cards, setCards] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const fetchResults = async () => { try { const params = JSON.parse(localStorage.getItem('searchParams') || '{}'); if (!params.origin || !params.destination) { throw new Error('Missing search parameters'); } const response = await axios.get('https://yourapi.com/flights', { params: { origin: params.origin, destination: params.destination, date: params.date }, headers: { 'Some-Key': 'abc', 'Some-Host': 'yourapi.com' } }); // 假设 API 返回结构为 { data: [...] } setCards(response.data.data || []); } catch (err) { console.error('Failed to fetch flight results:', err); setCards([]); } finally { setLoading(false); } }; fetchResults(); }, []); // 空依赖数组确保只在组件首次挂载时执行 if (loading) return <div className="text-center mt-5"><p>Loading search results...</p></div>; return ( <div className="row"> {cards.map((card, index) => ( <div key={index} className="col-lg-4 responsive-column"> <div className="card mb-4"> <div className="card-body"> <h5 className="card-title">{card.airline}</h5> <p className="card-text">From {card.origin} → {card.destination}</p> <p className="text-muted">{card.departureTime} – {card.arrivalTime}</p> </div> </div> </div> ))} </div> ); }; export default CreateApp; -
关键注意事项
- ✅ 清除过期参数：在 fetchResults 执行成功后，建议立即清理 localStorage（localStorage.removeItem('searchParams')），避免下次无搜索直接访问结果页时误用旧参。
- ✅ 错误防御：始终校验 localStorage.getItem 返回值是否为有效 JSON 字符串，防止解析失败导致白屏。
- ✅ SEO 与 SSR 兼容性：若项目启用 React Server-Side Rendering（如 Next.js），localStorage 不可用，需改用 URL 查询参数（window.location.search）或服务端透传。
- ❌ 避免 postMessage 陷阱：除非两个页面处于同一窗口上下文（如 iframe），否则跨页面 postMessage 在 WordPress 全页跳转中不可靠，不建议用于核心数据流。
该方案优势显著：逻辑清晰、调试友好、无竞态条件、天然支持 React 生态（状态管理、错误边界、Suspense 等），且与 WordPress 的 PHP 渲染层解耦，大幅提升长期可维护性。
