遇到無法存取data.json檔案並進行新卡片/元件篩選的難題
P粉032977207
2023-08-16 19:28:38
<p>所以我已經設定好我的頁面，可以從上一個頁面取得id。如果我點擊圖片4，它會顯示url (/Food/4)，依此類推。所以我從上一個頁面獲取了正確的資訊。現在我遇到的問題是使用fetch來獲取我的data.json文件，從json中獲取信息，然後根據id在頁面上呈現信息。所以如果我點擊圖片4，並將id傳遞給我的新頁面，我想顯示來自json檔案的圖片4的資料。我嘗試了幾種不同的fetch設置，甚至是axios設置，但我完全不知所措。我需要實作useParams嗎？ params.id？謝謝！ </p>
<pre class="brush:php;toolbar:false;">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>
)
}</pre>
存取data.json以進行過濾
看起來你想要根據透過URL傳遞的
id從JSON檔案載入一個項目。你已經直接將
data.json檔案匯入到你的元件中，所以不需要使用fetch或axios來請求它。它已經作為變數data存在於元件中。因此，你可以根據從URL取得的id參數來過濾數據，然後使用相關物件設定item狀態。這是你應該更新
Foodinfo元件以解決你的問題的方式：useParams從URL中取得id。id解析為整數，因為params.id將是一個字串類型，而JSON檔案中的數據可能使用數字作為ID。data陣列中找到與URL中的id相同的item。setItem函數將這個item設定為item狀態。調整後的程式碼：
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> ); }