Menghadapi masalah tidak dapat mengakses fail data.json dan menapis kad/komponen baharu

Question

Jadi saya telah menyediakan halaman saya untuk mendapatkan id daripada halaman sebelumnya. Jika saya klik pada imej 4 ia menunjukkan url (/Food/4) dan seterusnya. Jadi saya mendapat maklumat yang betul dari halaman sebelumnya. Sekarang masalah yang saya hadapi ialah menggunakan fetch untuk mendapatkan fail data.json saya, dapatkan maklumat daripada json dan kemudian berikan maklumat pada halaman berdasarkan id. Jadi jika saya klik pada imej 4 dan hantar id ke halaman baharu saya, saya mahu memaparkan data untuk imej 4 daripada fail json. Saya telah mencuba beberapa tetapan pengambilan yang berbeza dan juga tetapan axios tetapi saya benar-benar buntu. Adakah saya perlu melaksanakan useParams? params.id? Terima kasih!

import React, { useState, useEffect } daripada 'react'
import { Link, useParams } daripada 'react-router-dom'
import data daripada './data.json'

eksport fungsi lalai Foodinfo() {

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

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

  kembali (
    <div>
        <h1>Maklumat Makanan</h1>
        <img src={item.pic} />
        <Pautan ke="/">
            <butang>Menu</button>
        </Pautan>
    </div>
  )
}

Answer 1

Akses data.json untuk penapisan

Nampaknya anda ingin memuatkan item berdasarkan id从JSON文件 yang dihantar melalui URL.

Anda telah menetapkan status data.json文件导入到你的组件中，所以不需要使用fetch或axios来请求它。它已经作为变量data存在于组件中。因此，你可以根据从URL获取的id参数来过滤数据，然后使用相关对象设置item terus.

Beginilah anda harus mengemas kini komponen Foodinfo untuk menyelesaikan masalah anda:

1. Hanya guna useParams从URL中获取id.
2. Data dalam id解析为整数，因为params.id将是一个字符串类型，而JSON文件 boleh menggunakan nombor sebagai ID.
3. dalamdata数组中找到与URL中的id相同的item.
4. Gunakan setItem函数将这个item untuk menetapkan kepada status item.
5. Akhir sekali, berikan maklumat projek dalam komponen anda.

Kod terlaras:

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