Блог

Итак, у меня возникла эта проблема. Я пытаюсь извлечь локальный файл json из своего проекта. Файл json хранится в папке src.

Это мой файл json

 [
    {
      "name": "Sunsssset Beach",
      "email": "info@sunsetbeach.com",
      "image": "https://images.unsplash.com/photo-1439130490301-25e322d88054?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1489amp;q=80",
      "price": 85,
      "maxGuests": 18,
      "lat": 60.393388,
      "lng": 5.22872,
      "description": "Get ready for some amazing sunsets as you sip a cocktail and watch dolphins play in the harbour below.",
      "selfCatering": true,
      "createdAt": "2020-09-04T09:07:10.367Z",
      "id": "5f5203bedc17b0a4b302f211"
    },
    {
      "name": "The Hideaway",
      "email": "info@hideaway.com",
      "image": "https://images.unsplash.com/photo-1551906993-c8b38a6ab201?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=666amp;q=80",
      "price": 70,
      "maxGuests": 2,
      "lat": 60.425168,
      "lng": 5.358141,
      "description": "This secluded wilderness cabin is the perfect spot for a restful and cosy getaway.",
      "selfCatering": true,
      "createdAt": "2020-09-04T09:07:10.370Z",
      "id": "5f5203bedc17b0a4b302f213"
    },
    {
      "name": "Rest Easy",
      "email": "management@resteasy.com",
      "image": "https://images.unsplash.com/photo-1512552288940-3a300922a275?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=751amp;q=80",
      "price": 120,
      "maxGuests": 14,
      "lat": 60.396779,
      "lng": 5.235602,
      "description": "Need some time off from your busy life to relax and unwind? Choose Rest Easy for the complete relaxation experience you desire.",
      "selfCatering": false,
      "createdAt": "2020-09-04T09:07:10.370Z",
      "id": "5f5203bedc17b0a4b302f212"
    }
  ]
  

И вот мой файл проекта

 function Establishment() {
  const [establishment, setEstablishment] = useState([]);
  const [loading, setLoading] = useState(true);

 useEffect(() => {
    fetch("jsonfile")
      .then((response) => {
        // check if response returns ok
        if (response.ok) {
          return response.json();
        } else {
          setErrorHandle(true);
        }
      })
      .then((data) => {
        setEstablishment(data);
      })
      .catch((err) => {
        console.log(err);
        setErrorHandle(true);
      })
      .finally(() => setLoading(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  

Теперь я хочу иметь возможность нажимать кнопку, отображающую все эти элементы, и, нажав на один элемент, он должен отображать только этот элемент на другой странице. Как мне это сделать?

Дайте мне знать, если вам нужно что-нибудь еще для решения этой проблемы 🙂

Во-первых, если данные JSON находятся в локальной файловой системе, вам не нужны выборки или axios

Почему вы не использовали Axios или Fetch?

Axios или Fetch используются для получения или отправки данных на сервер. В нашем случае мы читаем файл локальной папки, поэтому мы используем map() .

Примечание: наиболее важно при использовании Axios и Fetch, чтобы параметр URL был обязательным

Теперь то, что вам нужно сделать, это:

1. Сначала импортируйте файл везде, где вы хотите использовать:

import data from "../static/data/myData.json";

2. Теперь вы хотите отобразить этот файл Json:

 <div>
    {
        data.map(myData, index)=>{
        
            return <div key={myData.id}>

                <h1>{myData.name}</h1>
                <h3>{myData.email}</h3>
            </div>


        }
    }  
</div>
  

• Итак, вот как вы хотите справиться с этой ситуацией, очевидно, структурируя содержимое так, как вы хотите, а не с помощью h1 и h3, как я