<p>Jadi saya telah menyediakan halaman saya untuk mendapatkan id daripada halaman sebelumnya. Jika saya klik pada imej 4 ia menunjukkan url (/Food/4) dan seterusnya. Jadi saya mendapat maklumat yang betul dari halaman sebelumnya. Sekarang masalah yang saya hadapi ialah menggunakan fetch untuk mendapatkan fail data.json saya, dapatkan maklumat daripada json dan kemudian berikan maklumat pada halaman berdasarkan id. Jadi jika saya klik pada imej 4 dan hantar id ke halaman baharu saya, saya mahu memaparkan data untuk imej 4 daripada fail json. Saya telah mencuba beberapa tetapan pengambilan yang berbeza dan juga tetapan axios tetapi saya benar-benar buntu. Adakah saya perlu melaksanakan useParams? params.id? Terima kasih! </p> <pre class="brush:php;toolbar:false;">import React, { useState, useEffect } daripada 'react' import { Link, useParams } daripada 'react-router-dom' import data daripada './data.json' eksport fungsi lalai Foodinfo() { const params = useParams() const [item, setItem] = useState(); useEffect(() => { fetch('/data.json') .then(respon => response.json()) .then(data => console.log(data)); }) kembali ( <div> <h1>Maklumat Makanan</h1> <img src={item.pic} /> <Pautan ke="/"> <butang>Menu</button> </Pautan> </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>
    );
}