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

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