遇到无法访问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 } 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>
访问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> ); }