<p>J'ai donc configuré ma page pour obtenir l'identifiant de la page précédente. Si je clique sur l'image 4, l'url (/Food/4) s'affiche et ainsi de suite. J'ai donc obtenu les informations correctes de la page précédente. Maintenant, le problème que j'ai est d'utiliser fetch pour obtenir mon fichier data.json, d'obtenir les informations du json, puis de restituer les informations sur la page en fonction de l'identifiant. Donc, si je clique sur l'image 4 et que je transmets l'identifiant à ma nouvelle page, je souhaite afficher les données de l'image 4 à partir du fichier json. J'ai essayé plusieurs paramètres de récupération différents et même des paramètres axios mais je suis complètement perdu. Dois-je implémenter useParams ? params.id ? Merci! </p> <pre class="brush:php;toolbar:false;">importer React, { useState, useEffect } depuis 'react' importer {Lien, useParams} depuis 'react-router-dom' importer des données depuis './data.json' exporter la fonction par défaut Foodinfo() { const params = useParams() const [élément, setItem] = useState(); useEffect(() => { récupérer('/data.json') .then(réponse => réponse.json()) .then(data => console.log(data)); }) retour ( <div> <h1>Informations sur les aliments</h1> <img src={item.pic} /> <Lien vers="/"> <bouton>Menu</bouton> </Lien> </div> ) }</pré>

import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import data from './data.json';

export default function Foodinfo() {
    const params = useParams();
    const [item, setItem] = useState(null);
  
    useEffect(() => {

        // 将URL参数中的id解析为整数类型
        const idFromUrl = parseInt(params.id, 10);

        // 在数据数组中找到与URL中的id匹配的项目
        const foundItem = data.find((d) => d.id === idFromUrl);
      
        // 将找到的项目设置为状态
        setItem(foundItem);
    }, [params.id]);
  
    return (
        <div>
            <h1>食物信息</h1>
            {/* 在尝试访问其属性之前检查项目是否存在 */}
            {item ? (
                <>
                    <img src={item.pic} alt={item.name} />
                    <p>{item.name}</p>
                    <p>{item.description}</p>
                </>
            ) : (
                <p>加载中...</p>
            )}
            <Link to="/">
                <button>菜单</button>
            </Link>
        </div>
    );
}