如何在 WordPress 中通过 React 实现跨页面搜索数据传递与渲染_技术教程

本文介绍一种可靠、可维护的方案：放弃依赖 `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 Loading search results
...;

  return (
    
      {cards.map((card, index) => (
        
          
            
              {card.airline}
              From {card.origin} → {card.destination}
              {card.departureTime} – {card.arrivalTime}
            
          
        
      ))}
    
  );
};

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 全页跳转中不可靠，不建议用于核心数据流。