API...在 React 问题中通过 componentDidMount 拉取 json.file 数据

Question

Morning all I am trying to use componentDidMount lifecycle method to pull some data through on the frontend from a .json file. and push it into the state. I need help with the following

1. The .json file is placed alongside the app.js in a folder. I am not sure if I am calling the file correctly. flying.json .

2. I have listed the json data too. How do I begin to pull that data through. (legs

Thanks peeps

Joe

1. app.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CardList }  from './../card-list/card-list'
import STYLES from './App.scss';
import Header from './../Header';

class App extends React.Component {
  constructor() {
    super();
      this.state = {
      tester: []
    };
  }

  componentDidMount() {
    fetch('flying.json')
      .then (response =>  response.json())
      .then(users => this.setState({tester:users}))
  }

  render() {
    return (
      <div style={{backgroundColor:'grey'}}>
        <Header />
        <CardList tester={this.state.tester}/>
      </div>
    )
  }
}

export default App 

2. the json file flying.json (note this is situated directly alongside app.js)

{
  "itineraries": [
    {
      "id": "it_1",
      "legs": [
        "leg_1",
        "leg_4"
      ],
      "price": "£35",
      "agent": "Wizzair.com",
      "agent_rating": 9.1
    },
    {
      "id": "it_2",
      "legs": [
        "leg_2",
        "leg_5"
      ],
      "price": "£115",
      "agent": "British Airways",
      "agent_rating": 9.3
    },
    {
      "id": "it_3",
      "legs": [
        "leg_3",
        "leg_6"
      ],
      "price": "£90",
      "agent": "Lufthansa",
      "agent_rating": 8.9
    },
    {
      "id": "it_4",
      "legs": [
        "leg_1",
        "leg_5"
      ],
      "price": "£105",
      "agent": "Trip.com",
      "agent_rating": 9.5
    },
    {
      "id": "it_5",
      "legs": [
        "leg_1",
        "leg_6"
      ],
      "price": "£195",
      "agent": "Trip.com",
      "agent_rating": 9.5
    },
    {
      "id": "it_6",
      "legs": [
        "leg_2",
        "leg_4"
      ],
      "price": "£93",
      "agent": "Kiwi.com",
      "agent_rating": 8.0
    },
    {
      "id": "it_7",
      "legs": [
        "leg_3",
        "leg_4"
      ],
      "price": "£42",
      "agent": "CheapFligths",
      "agent_rating": 10.0
    }
  ],
  "legs": [
    {
      "id": "leg_1",
      "departure_airport": "BUD",
      "arrival_airport": "LTN",
      "departure_time": "2020-10-31T15:35",
      "arrival_time": "2020-10-31T17:00",
      "stops": 0,
      "airline_name": "Wizz Air",
      "airline_id": "WZ",
      "duration_mins": 145
    },
    {
      "id": "leg_2",
      "departure_airport": "BUD",
      "arrival_airport": "LHR",
      "departure_time": "2020-10-31T12:05",
      "arrival_time": "2020-10-31T17:00",
      "stops": 1,
      "airline_name": "British Airways",
      "airline_id": "BA",
      "duration_mins": 190
    },
    {
      "id": "leg_3",
      "departure_airport": "BUD",
      "arrival_airport": "LGW",
      "departure_time": "2020-10-31T22:35",
      "arrival_time": "2020-11-01T00:10",
      "stops": 0,
      "airline_name": "Lufthansa",
      "airline_id": "LH",
      "duration_mins": 155
    },
    {
      "id": "leg_4",
      "departure_airport": "LTN",
      "arrival_airport": "BUD",
      "departure_time": "2020-11-11T19:45",
      "arrival_time": "2020-11-11T21:10",
      "stops": 0,
      "airline_name": "Wizz Air",
      "airline_id": "WZ",
      "duration_mins": 145
    },
    {
      "id": "leg_5",
      "departure_airport": "LHR",
      "arrival_airport": "BUD",
      "departure_time": "2020-11-11T11:25",
      "arrival_time": "2020-11-11T19:10",
      "stops": 1,
      "airline_name": "British Airways",
      "airline_id": "BA",
      "duration_mins": 190
    },
    {
      "id": "leg_6",
      "departure_airport": "LGW",
      "arrival_airport": "BUD",
      "departure_time": "2020-11-11T08:10",
      "arrival_time": "2020-11-11T11:40",
      "stops": 0,
      "airline_name": "Lufthansa",
      "airline_id": "LH",
      "duration_mins": 150
    }
  ]
}

Answer 1

You can import it. eg

import data from "./flying.json";

Full example

import "./styles.css";
import data from "./flying.json";

export default function App() {
  return (
    <div className="App">
      {data.itineraries.map((item) => (
        <div key={item.id}>{item.id}</div>
      ))}
    </div>
  );
}

Working Example

https://codesandbox.io/s/funny-margulis-rdkxo?file=/src/App.js

Answer 2

Another interesting option is to move the JSON file to the public directory and then use Javascript's fetch API to retrieve it.

import { useEffect, useState } from "react";

const App = () => {
  const [ data, setData ] = useState({});

  useEffect(() => {
    (async () => {
      await fetch("/flying.json")
      then(res => res.json())
      then(json => setData(json))
    })();
  });

  return(
    data.map(item => {
      return(
        <div key={item.id}>
          // return whatever you want here
        </div>
      )
    }
  }
}