Es ist das Problem aufgetreten, dass ich nicht auf die Datei data.json zugreifen und keine neue Karten-/Komponentenfilterung durchführen konnte

Question

Also habe ich meine Seite so eingerichtet, dass sie die ID von der vorherigen Seite erhält. Wenn ich auf Bild 4 klicke, wird die URL (/Food/4) usw. angezeigt. Ich habe also die richtigen Informationen von der vorherigen Seite erhalten. Jetzt besteht das Problem, das ich habe, darin, fetch zu verwenden, um meine data.json-Datei abzurufen, die Informationen aus dem JSON abzurufen und die Informationen dann basierend auf der ID auf der Seite darzustellen. Wenn ich also auf Bild 4 klicke und die ID an meine neue Seite übergebe, möchte ich die Daten für Bild 4 aus der JSON-Datei anzeigen. Ich habe verschiedene Abrufeinstellungen und sogar Axios-Einstellungen ausprobiert, bin aber völlig ratlos. Muss ich useParams implementieren? params.id? Danke!

import React, { useState, useEffect } from 'react'
importiere { Link, useParams } aus 'react-router-dom'
Daten aus „./data.json“ importieren

Standardfunktion Foodinfo() exportieren {

    const params = useParams()
    const [item, setItem] = useState();

    useEffect(() => {
        fetch('/data.json')
        .then(response => Response.json())
        .then(data => console.log(data));
    })

  zurückkehren (
    <div>
        <h1>Lebensmittelinfo</h1>
        <img src={item.pic} />
        <Link zu="/">
            <button>Menü</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>
    );
}