Encountered the problem of being unable to access the data.json file and perform new card/component filtering

Question

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!

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

Answer 1

Access data.json for filtering

It looks like you want to load an item from a JSON file based on the id passed via the URL.

You have imported the data.json file directly into your component, so there is no need to use fetch or axios to request it. It already exists in the component as variable data. Therefore, you can filter the data based on the id parameter obtained from the URL, and then use the related object to set the item status.

This is how you should update the Foodinfo component to resolve your issue:

1. Just use useParams to get the id from the URL.
2. Parse id as an integer because params.id will be a string type and the data in the JSON file Possibly use a number as ID.
3. Find the item that is the same as the id in the data array.
4. Use the setItem function to set this item to the item state.
5. Finally, render the project information in your component.

Adjusted code:

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