遇到無法存取data.json檔案並進行新卡片/元件篩選的難題

Question

所以我已經設定好我的頁面，可以從上一個頁面取得id。如果我點擊圖片4，它會顯示url (/Food/4)，依此類推。所以我從上一個頁面獲取了正確的資訊。現在我遇到的問題是使用fetch來獲取我的data.json文件，從json中獲取信息，然後根據id在頁面上呈現信息。所以如果我點擊圖片4，並將id傳遞給我的新頁面，我想顯示來自json檔案的圖片4的資料。我嘗試了幾種不同的fetch設置，甚至是axios設置，但我完全不知所措。我需要實作useParams嗎？ params.id？謝謝！

import React, { useState, useEffect } from 'react'
import { Link, useParams } 從 '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

存取data.json以進行過濾

看起來你想要根據透過URL傳遞的id從JSON檔案載入一個項目。

你已經直接將data.json檔案匯入到你的元件中，所以不需要使用fetch或axios來請求它。它已經作為變數data存在於元件中。因此，你可以根據從URL取得的id參數來過濾數據，然後使用相關物件設定item狀態。

這是你應該更新Foodinfo元件以解決你的問題的方式：

1. 只需使用useParams從URL中取得id。
2. 將id解析為整數，因為params.id將是一個字串類型，而JSON檔案中的數據可能使用數字作為ID。
3. 在data陣列中找到與URL中的id相同的item。
4. 使用setItem函數將這個item設定為item狀態。
5. 最後，在你的元件中渲染專案資訊。

調整後的程式碼：

#

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