J'ai rencontré le problème de l'impossibilité d'accéder au fichier data.json et d'effectuer un nouveau filtrage de carte/composant.

Question

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!

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 (
    

        
Informations sur les aliments
        
        
            Menu
        
    
  )
}

Answer 1

Accédez à data.json pour le filtrage

Il semble que vous souhaitiez charger un élément en fonction du id从JSON文件 transmis via l'URL.

Vous avez directement défini le statut data.json文件导入到你的组件中，所以不需要使用fetch或axios来请求它。它已经作为变量data存在于组件中。因此，你可以根据从URL获取的id参数来过滤数据，然后使用相关对象设置item.

Voici comment mettre à jour le composant Foodinfo pour résoudre votre problème :

1. Utilisez simplement useParams从URL中获取id.
2. Les données contenues dans id解析为整数，因为params.id将是一个字符串类型，而JSON文件 peuvent utiliser des chiffres comme identifiants.
3. dansdata数组中找到与URL中的id相同的item.
4. Utilisez setItem函数将这个item pour définir le statut de l'article.
5. Enfin, restituez les informations du projet dans votre composant.

Code ajusté :

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>
    );
}