API ...在 React 问题中使用 componentDidMount 拉取 json.file 数据

Question

早上好 我正在尝试使用 componentDidMount 生命周期方法在前端从 .json 文件中提取一些数据。并将其推入状态。我需要以下帮助

1. .json 文件与 app.js 一起放置在一个文件夹中。我不确定我是否正确调用了文件。 flying.json.

2. 我也列出了 json 数据。我如何开始提取这些数据。 （腿

谢谢大家

乔

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 

1. json 文件 fly.json（注意它直接位于 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

你可以导入它。例如

import data from "./flying.json";

完整示例

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

工作示例

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

Answer 2

另一个有趣的选择是将 JSON 文件移动到公共目录，然后使用 Javascript 的 fetch API 来检索它。

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