<p>So I have my page set up to get the id from the previous page. If I click on image 4 it shows the url (/Food/4) and so on. So I got the correct information from the previous page. Now the problem I have is using fetch to get my data.json file, get the information from the json and then render the information on the page based on the id. So if I click on image 4 and pass the id to my new page, I want to display the data for image 4 from the json file. I've tried several different fetch settings and even axios settings but I'm completely at a loss. Do I need to implement useParams? params.id? Thanks! </p> <pre class="brush:php;toolbar:false;">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(); useEffect(() => { fetch('/data.json') .then(response => response.json()) .then(data => console.log(data)); }) return ( <div> <h1>Food Info</h1> <img src={item.pic} /> <Link to="/"> <button>Menu</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>
    );
}