data.json ファイルにアクセスできず、新しいカード/コンポーネントのフィルタリングを実行できないという問題が発生しました。

Question

それで、前のページから ID を取得するようにページを設定しました。画像 4 をクリックすると、URL (/Food/4) などが表示されます。したがって、前のページから正しい情報を得ることができました。ここで私が抱えている問題は、fetchを使用してdata.jsonファイルを取得し、jsonから情報を取得し、IDに基づいてページに情報をレンダリングすることです。したがって、画像 4 をクリックして新しいページに ID を渡すと、json ファイルから画像 4 のデータを表示したいと考えます。いくつかの異なるフェッチ設定、さらには axios 設定を試しましたが、完全に迷っています。 useParams を実装する必要がありますか? params.id?ありがとう！

import React, { useState, useEffect } from 'react'
import { Link, useParams } from 'react-router-dom'
「./data.json」からデータをインポートします

デフォルト関数 Foodinfo() をエクスポート {

    const params = useParams()
    const [アイテム, setItem] = useState();

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

  戻る （
    <div>
        <h1>食事情報</h1>
        <img src={item.pic} />
        <「/」へのリンク>
            <ボタン>メニュー</ボタン>
        </リンク>
    </div>
  )
}

Answer 1

フィルタリングのために data.json にアクセスする

URL 経由で渡された id に基づいて、JSON ファイル から項目をロードしたいようです。

data.json ファイルをコンポーネントに直接インポートしたため、fetch または axios を使用してリクエストする必要はありません。これはコンポーネント内に変数 data としてすでに存在します。したがって、URL から取得した id パラメーターに基づいてデータをフィルターし、関連オブジェクトを使用して item ステータスを設定できます。

これは、問題を解決するために Foodinfo コンポーネントを更新する方法です:

1. useParams を使用して、URL から id を取得するだけです。
2. params.id は 文字列型 であり、JSON ファイルのデータであるため、id を整数として解析します。 IDとしての番号。
データ配列
3. の id と同じ item を見つけます。 setItem
関数を使用して、この
4. item を項目の状態に設定します。 最後に、コンポーネント内でプロジェクト情報をレンダリングします。
調整されたコード:

リーリー