data.json 파일에 접근할 수 없고 새로운 카드/구성 요소 필터링을 수행할 수 없는 문제가 발생했습니다.
P粉032977207
P粉032977207 2023-08-16 19:28:38
0
1
487

그래서 이전 페이지에서 ID를 가져오도록 페이지를 설정했습니다. 이미지 4를 클릭하면 URL(/Food/4) 등이 표시됩니다. 그래서 이전 페이지에서 올바른 정보를 얻었습니다. 이제 내가 가진 문제는 가져오기를 사용하여 data.json 파일을 가져오고 json에서 정보를 가져온 다음 ID를 기반으로 페이지에 정보를 렌더링하는 것입니다. 따라서 이미지 4를 클릭하고 ID를 새 페이지에 전달하면 json 파일에서 이미지 4에 대한 데이터를 표시하려고 합니다. 여러 가지 다른 가져오기 설정과 axios 설정을 시도했지만 완전히 당황했습니다. useParams를 구현해야 합니까? params.id? 감사해요!

'react'에서 React, { useState, useEffect } 가져오기 import { Link, useParams } from 'react-router-dom' './data.json'에서 데이터 가져오기 기본 함수 Foodinfo() 내보내기 { const 매개변수 = useParams() const [item, setItem] = useState(); useEffect(() => { 가져오기('/data.json') .then(응답 => response.json()) .then(데이터 => console.log(데이터)); }) 반품 ( 

음식 정보

<링크:="/"> <버튼>메뉴
) }
P粉032977207
P粉032977207

모든 응답 (1)
P粉020085599

필터링을 위해 data.json에 액세스

URL을 통해 전달된idJSON文件을 기반으로 항목을 로드하려는 것 같습니다.

귀하가data.json文件导入到你的组件中,所以不需要使用fetchaxios来请求它。它已经作为变量data存在于组件中。因此,你可以根据从URL获取的id参数来过滤数据,然后使用相关对象设置item상태를 직접 설정했습니다.

문제를 해결하기 위해Foodinfo구성요소를 업데이트하는 방법은 다음과 같습니다.

  1. 그냥useParams从URL中获取id를 사용하세요.
  2. id解析为整数,因为params.id将是一个字符串类型,而JSON文件의 데이터는 숫자를 ID로 사용할 수 있습니다.
  3. indata数组中找到与URL中的id相同的item.
  4. setItem函数将这个item를 사용하여 항목 상태를 설정하세요.
  5. 마지막으로 구성 요소에 프로젝트 정보를 렌더링합니다.

조정된 코드:

으아악
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!