React中如何将映射获取的单个手艺人数据传递给详情卡片组件

我来帮你搞定这个需求！你现在要实现的是点击列表里的手艺人卡片，跳转到详情页并展示该手艺人的完整信息，下面基于你已经在用的react-router-dom给你两种实用的实现方案：

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

这种方法是生产环境里的首选，因为即使用户刷新详情页面，也能通过ID重新拉取数据，不会丢失内容。

步骤1：配置动态路由 #

首先在你的路由配置文件（比如App.js或者专门的路由管理文件）里，添加一个匹配详情页的动态路由：

import { Routes, Route } from 'react-router-dom';
import IndividualCard from './IndividualCard'; // 引入你的详情组件
import ArtisanAlimentation from './ArtisanAlimentation'; // 引入列表组件

function App() {
  return (
    <Routes>
      {/* 原有的路由... */}
      <Route path="/artAlim" element={<ArtisanAlimentation />} />
      {/* 新增详情页动态路由，:artisanId是动态参数 */}
      <Route path="/artisan/:artisanId" element={<IndividualCard />} />
    </Routes>
  );
}

步骤2：修改列表组件的Link，传递手艺人ID #

在你的ArtisanAlimentation组件里，把原来的Link to='#'改成带手艺人ID的动态路径，同时加上key属性（React列表渲染的规范要求）：

// 替换原有的map渲染部分
{artisans.map(artisan => (
  <Link key={artisan.id} to={`/artisan/${artisan.id}`}>
    <Card className="mb-3" style={{ width: '18rem' }}>
      <Card.Body>
        <p>Nom: {artisan.nom}</p>
        <p>Note: <Rating initialValue={artisan.note} allowFraction size={25}/></p>
        <p>Spécialité: {artisan.specialite}</p>
        <p>Localisation: {artisan.ville}</p>
      </Card.Body>
    </Card>
  </Link>
))}

步骤3：在详情组件中通过ID获取数据 #

在IndividualCard组件里，用useParams获取路由参数里的ID，然后请求对应的手艺人详情：

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { Card } from "react-bootstrap";
import { Rating } from "react-simple-star-rating";

export default function IndividualCard() {
  const { artisanId } = useParams();
  const [artisan, setArtisan] = useState(null);

  // 根据ID获取单个手艺人数据
  const getArtisanDetails = async () => {
    // 这里假设你的后端API支持通过ID查询单条数据，路径是/artAlim/${artisanId}
    const res = await fetch(`http://localhost:3000/artAlim/${artisanId}`);
    const json = await res.json();
    setArtisan(json);
  };

  useEffect(() => {
    if (artisanId) {
      getArtisanDetails();
    }
  }, [artisanId]);

  // 数据加载中的占位
  if (!artisan) return <div className="mt-5">Chargement...</div>;

  return (
    <div className="mt-5 pt-5 container">
      <Card style={{ width: '24rem' }}>
        <Card.Body>
          <h2 className="mb-4">{artisan.nom}</h2>
          <p>Note: <Rating initialValue={artisan.note} allowFraction size={30}/></p>
          <p>Spécialité: {artisan.specialite}</p>
          <p>Localisation: {artisan.ville}</p>
          {/* 这里可以添加更多你需要展示的详情字段，比如地址、电话等 */}
          {artisan.adresse && <p>Adresse: {artisan.adresse}</p>}
          {artisan.telephone && <p>Téléphone: {artisan.telephone}</p>}
        </Card.Body>
      </Card>
    </div>
  );
}

方案二：通过Link的state属性直接传递完整数据（临时场景适用） #

如果你的后端暂时不支持单条数据查询，或者只是做临时测试，可以用这种方法直接把整个手艺人对象通过Link的state属性传递。但要注意：刷新详情页面后，state里的数据会丢失，所以只适合不需要刷新的场景。

步骤1：修改列表组件的Link，传递state数据 #

{artisans.map(artisan => (
  <Link key={artisan.id} to="/artisan" state={{ artisan: artisan }}>
    {/* 卡片内容不变 */}
  </Link>
))}

步骤2：配置详情页路由 #

<Route path="/artisan" element={<IndividualCard />} />

步骤3：在详情组件中获取state数据 #

import { useLocation } from "react-router-dom";
import { Card } from "react-bootstrap";
import { Rating } from "react-simple-star-rating";

export default function IndividualCard() {
  const location = useLocation();
  // 从state中取出传递的手艺人数据，做空值判断
  const artisan = location.state?.artisan;

  if (!artisan) return <div className="mt-5">Aucun artisan trouvé</div>;

  return (
    <div className="mt-5 pt-5 container">
      <Card style={{ width: '24rem' }}>
        <Card.Body>
          <h2 className="mb-4">{artisan.nom}</h2>
          <p>Note: <Rating initialValue={artisan.note} allowFraction size={30}/></p>
          <p>Spécialité: {artisan.specialite}</p>
          <p>Localisation: {artisan.ville}</p>
          {/* 这里可以添加更多你需要展示的详情字段 */}
        </Card.Body>
      </Card>
    </div>
  );
}

小提示 #

• 一定要给map渲染的元素加上key属性（比如key={artisan.id}），这是React列表渲染的要求，能提升性能并避免控制台警告。
• 如果选择方案一，要确保你的后端API支持GET http://localhost:3000/artAlim/{id}这样的请求，返回单个手艺人的数据。

内容来源于stack exchange