Ionic React中通过routerLink向其他页面传递循环数据的方法

嘿，作为React和Ionic新手，这个需求太常见啦！我来一步步教你怎么把循环里选中的医生数据传递到/addAppointment页面，分两种实用方式，你可以根据场景选择～

方式一：通过路由参数传递医生ID（推荐，页面刷新数据不丢失） #

这种方式是把医生的唯一标识（比如id）放到URL里，目标页面通过ID从数据源中匹配对应数据，好处是页面刷新后依然能正常获取数据。

1. 修改列表项的routerLink #

把原来的固定路由改成带ID的动态路由，同时替换key为医生唯一标识（比index更稳妥）：

<IonList>
  {doctors.map((elem) => {
    return (
      <IonItem routerLink={`/addAppointment/${elem.id}`} key={elem.id}>
        <IonAvatar slot="start">
          <img src={elem['imageUrl']} ></img>
        </IonAvatar>
        <IonLabel >
          <IonText className="font-weight: bold;">
            <h2>{elem["name"]}</h2>
          </IonText>
          <h3>{elem["speciality"]}</h3>
          <h4>{elem["email"]}</h4>
        </IonLabel>
      </IonItem>
    );
  })}
</IonList>

2. 配置动态路由 #

在你的路由配置文件（比如App.tsx）里，把/addAppointment路由改成带参数的形式：

import { Route, Routes } from 'react-router-dom';
import AddAppointmentPage from './pages/AddAppointmentPage';

// ...其他代码
<IonRouterOutlet>
  <Routes>
    {/* 其他路由 */}
    <Route path="/addAppointment/:doctorId" element={<AddAppointmentPage />} />
  </Routes>
</IonRouterOutlet>

3. 目标页面获取并展示数据 #

在AddAppointmentPage中，用useParams钩子获取URL里的doctorId，再从你的医生数据源中找到对应数据：

import { useParams } from 'react-router-dom';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar } from '@ionic/react';

// 假设你的医生数据源是全局可访问的，或通过状态管理传递
const doctors = [...]; // 你的医生数组数据

const AddAppointmentPage = () => {
  const { doctorId } = useParams<{ doctorId: string }>();
  const selectedDoctor = doctors.find(doc => doc.id === doctorId);

  if (!selectedDoctor) {
    return (
      <IonPage>
        <IonContent className="ion-padding">
          <p>未找到指定医生信息</p>
        </IonContent>
      </IonPage>
    );
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>预约医生</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonAvatar>
          <img src={selectedDoctor.imageUrl} alt={selectedDoctor.name}></img>
        </IonAvatar>
        <h2>{selectedDoctor.name}</h2>
        <h3>{selectedDoctor.speciality}</h3>
        <h4>{selectedDoctor.email}</h4>
        {/* 可添加预约表单等内容 */}
      </IonContent>
    </IonPage>
  );
};

export default AddAppointmentPage;

方式二：通过路由state传递完整医生对象（简单直接，刷新可能丢失数据） #

如果你的医生数据结构不大，也可以直接把整个对象放到路由的state里传递，这种方式不需要修改路由配置，但页面刷新后state数据可能会丢失（取决于路由模式）。

1. 修改列表项的routerLink #

把routerLink改成对象形式，传入state携带医生数据：

<IonList>
  {doctors.map((elem) => {
    return (
      <IonItem 
        routerLink={{
          pathname: '/addAppointment',
          state: { doctor: elem } // 携带当前医生对象
        }} 
        key={elem.id}
      >
        {/* 内部内容和原来一致 */}
        <IonAvatar slot="start">
          <img src={elem['imageUrl']} ></img>
        </IonAvatar>
        <IonLabel >
          <IonText className="font-weight: bold;">
            <h2>{elem["name"]}</h2>
          </IonText>
          <h3>{elem["speciality"]}</h3>
          <h4>{elem["email"]}</h4>
        </IonLabel>
      </IonItem>
    );
  })}
</IonList>

2. 目标页面获取state数据 #

在AddAppointmentPage中用useLocation钩子获取state里的医生对象：

import { useLocation } from 'react-router-dom';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar } from '@ionic/react';

const AddAppointmentPage = () => {
  const location = useLocation();
  const selectedDoctor = location.state?.doctor;

  if (!selectedDoctor) {
    return (
      <IonPage>
        <IonContent className="ion-padding">
          <p>未选择医生</p>
        </IonContent>
      </IonPage>
    );
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>预约医生</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonAvatar>
          <img src={selectedDoctor.imageUrl} alt={selectedDoctor.name}></img>
        </IonAvatar>
        <h2>{selectedDoctor.name}</h2>
        <h3>{selectedDoctor.speciality}</h3>
        <h4>{selectedDoctor.email}</h4>
      </IonContent>
    </IonPage>
  );
};

export default AddAppointmentPage;

小提醒 #

• 优先用医生的唯一ID作为key，避免数组元素顺序变化时React更新DOM出错。
• 若需要页面刷新后数据依然可用，选方式一；若只是临时跳转且数据量小，方式二更便捷。

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