<p>Also habe ich meine Seite so eingerichtet, dass sie die ID von der vorherigen Seite erhält. Wenn ich auf Bild 4 klicke, wird die URL (/Food/4) usw. angezeigt. Ich habe also die richtigen Informationen von der vorherigen Seite erhalten. Jetzt besteht das Problem, das ich habe, darin, fetch zu verwenden, um meine data.json-Datei abzurufen, die Informationen aus dem JSON abzurufen und die Informationen dann basierend auf der ID auf der Seite darzustellen. Wenn ich also auf Bild 4 klicke und die ID an meine neue Seite übergebe, möchte ich die Daten für Bild 4 aus der JSON-Datei anzeigen. Ich habe verschiedene Abrufeinstellungen und sogar Axios-Einstellungen ausprobiert, bin aber völlig ratlos. Muss ich useParams implementieren? params.id? Danke! </p> <pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from 'react' importiere { Link, useParams } aus 'react-router-dom' Daten aus „./data.json“ importieren Standardfunktion Foodinfo() exportieren { const params = useParams() const [item, setItem] = useState(); useEffect(() => { fetch('/data.json') .then(response => Response.json()) .then(data => console.log(data)); }) zurückkehren ( <div> <h1>Lebensmittelinfo</h1> <img src={item.pic} /> <Link zu="/"> <button>Menü</button> </Link> </div> ) }</pre>

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